![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihXbLsEMP4tT8XR7lBsZztuo9tvR8SaG2KghMam19nSgJW69ebOi2biCBqt0gNEGRWEqZacB2OTa1Pv_LxiMfUMIwUJAn_7c9ulDtllQhYXGEQ3Rf1QTZvxC0rOp92Ypb0JFxg_yo4Tr5L/s1600/%25E5%25A4%259A%25E9%259A%258E%25E5%25B1%25A4%25E3%2581%25AE%25E3%2582%25A2%25E3%2582%25B3%25E3%2583%25BC%25E3%2583%2587%25E3%2582%25A3%25E3%2582%25AA%25E3%2583%25B3%25E3%2583%2591-027.jpg)
複数の階層を持つアコーディオンパネルを 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 はデザイン用で、アコーディオンパネルの開閉とは関係ありません。