複数の階層を持つアコーディオンパネルを 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 はデザイン用で、アコーディオンパネルの開閉とは関係ありません。