2017年2月8日

多階層のアコーディオンパネル

複数の階層を持つアコーディオンパネルを jQuery で実装する方法について紹介します。

HTML

補足

  • id 名 accordion-panel を付けた div 要素内に 入れ子の dl 要素を記述しています。

jQuery

補足

  • パネル全体がコンパクトになるよう、クリック時に余計な dd 要素は非表示にします。
  • まず、クリックされた dt 要素を基準に、同階層とその下層の dd 要素を全て非表示にしています。
  • 次に、クリックされた dt 要素の次の dd 要素の開閉状態に応じて、表示・非表示を設定しています。

CSS

補足

  • jQuery だと読み込み時に一瞬表示されてしまうので、CSS で id 名 accordion-panel の div 要素内の dd 要素を全て非表示にしています。
  • クラス layer-1, layer-2, layer-3 はデザイン用で、アコーディオンパネルの開閉とは関係ありません。

サンプル