課題6：開閉可能なパネルを作成しよう

課題６：開閉可能なパネルを作成しよう
dl dt dd を使ってまずこのような画面をつくってみよう
【panel.html】
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>開閉パネル</title>
<link href="panel.css" rel="stylesheet" type="text/css" />
</head>
<body>
<dl id="panel">
<dt>お七夜</dt>
<dd>生後 7 日目に行う赤ちゃんの健康をお祝いする行事です。赤ちゃんの名前をみんなに知ってもら
うため命名書を準備します。</dd>
<dt>お宮参り </dt>
<dd>生後 1 か月くらいの大安の日に土地の氏神様に赤ちゃんの誕生を報告しに行く行事です。健康祈
願だけではなく、お祓いをしてもらう人もいます。</dd>
<dt>お食い初め</dt>
<dd>生後 100 日目くらいに行う儀式です。塗りの器で祝い膳を用意して、親族の中で一番高齢な方の
膝の上で赤ちゃんにご飯を食べさせるマネをします。</dd>
</dl>
</body>
</html>
【panel.css】
#panel {
width: 300px;
}
#panel dt {
background-color: Silver;
cursor: pointer;
color: White;
background-image : url("./images/panel.jpg");
padding: 4px;
}
#panel dd {
border: solid 1px Silver;
margin: 0px;
padding: 10px;
}
このソースに jQuery を組み込んで以下のような画面にしてみよう
クリックすると内容が開いて見える
<script type="text/javascript" src="../jquery-1.6.4.min.js"></script>
<script type="text/javascript">
$(function () {
$('#panel dd').hide();
$('#panel dt')
.click(function (e) {
var d = $('+dd', this);
if (d.css('display') === 'block') {
d.slideUp(1000);
} else {
d.slideDown(1000);
}
});
});
</script>
最初に#panel dd をすべて hide しているので、非表示になっている。
そしてクリックされたときに、パネルを slideDown で開きます。
そして css の display プロパティが block である場合は、逆に slideUp で閉じます。
自分でパネルのタイトルとデータを作って、自分なりのパネルを作ってみよう。

Download Report