【jQuery入門】開閉可能なパネルを作成する

ソースコード

<dl id="panel">
  <dt>お七夜</dt>
  <dd>生後7日目に行う赤ちゃんの健康をお祝いする行事です。赤ちゃんの名前をみんなに知ってもらうため命名書を準備します。お母さんは、病院から退院したばかりで無理させてはいけないので、祖父母やお父さんが頑張って準備するようです。</dd>
  <dt>お宮参り </dt>
  <dd>生後1か月くらいの大安の日に土地の氏神様に赤ちゃんの誕生を報告しに行く行事です。健康祈願だけではなく、お祓いをしてもらう人もいます。赤ちゃんに着せる着物は、お母さんの実家から贈るのが一般的です。また、その場合、紋はお母さんの実家の紋とします。</dd>
  <dt>お食い初め</dt>
  <dd>生後100日目くらいに行う儀式です。塗りの器で祝い膳を用意して、親族の中で一番高齢な方の膝の上で赤ちゃんにご飯を食べさせるマネをします。メニューは、一汁三菜が基本です。</dd>
</dl>

$(function () {
  $("#panel > dd").hide();
  $("#panel > dt").click(function (e) {
    var d = $("+dd", this); // クリックされた要素の次のdd要素を指定
    if (d.css("display") === "block") {
      d.slideUp(500);
    } else {
      d.slideDown(500);
    }
  });
});

#panel {
  width: 500px;
}

#panel > dt {
  border-left: solid 10px #06f;
  border-bottom: solid 1px White;
  background-color: #006;
  color: White;
  cursor: pointer;
  padding: 10px;
  font-weight: bold;
}

#panel > dd {
  border: solid 1px Silver;
  margin: 0px;
  padding: 10px;
}

See the Pen
jQuery18-1 by shinjiezumi (@sezumi)
on CodePen.

開閉パネルを実装するための準備

開閉パネルはdlリストとして定義

開閉パネルはdlリストとして定義し、クリックするための部分はdt要素で、開閉できる本文をdd要素で囲む

開閉パネルのスタイルを設定する

開閉パネルのスタイルとして、#panel > ddでdisplayプロパティをnoneに設定してない。（すべてのパネルを表示状態にし、非表示処理をあとからJavasciptで行う）

こうすることで、ブラウザがJavascriptを無効にしていても内容が表示される

slideUp／slideDownメソッドで開閉パネルの機能を実装する

すべてのパネルを閉じる

初期化処理ですべてのdl要素配下のdd要素を非表示にする

タイトルクリックしたら、パネルを表示状態にする

クリックされたdt要素に対応するdd要素を取得し、パネルの表示状態に応じてslideUp／slideDownメソッドで開閉する。

slideToggleメソッドを使って、スライドアップ／スライドダウンを交互に行う

slideToggleメソッドを使うと、分岐が不要になりもっとシンプルに記述できる

$('+dd', this).slideToggle(500)

アコーディオンパネルを実装する

ひとつのパネルを開いていたら他のパネルは閉じるようなものをアコーディオンパネルと言う。

$(function() {
  $('#panel > dd:gt(0)').hide(); // １枚目のパネルを除いて非表示に
  $('#panel > dt')
    .click(function(e) {
      $('#panel > dd').slideUp(500); // 全てのパネルを閉じて、選択パネルのみを表示
      $('+dd', this).slideDown(500);
    });
});