開閉アイコン付きアコーディオンパネル

パネルの開閉状態をあらわすアイコンが付いたアコーディオンパネル。開くパネルを一つに限定することもできる。

デモページを表示

CSS

補足

• 28・32行目：開閉状態をあらわすアイコンを文字で指定。
• レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

jQuery

補足

• 開くパネルを一つに限定しない場合、5～11行目は不要。
• デモページで使用している jQuery のバージョンは 1.12.4 。

HTML

補足

• 3行目：開くパネルを一つに限定しない時は、dl 要素に accordion-panelクラスを設定する。
• 31行目：開くパネルを一つに限定する場合、dl 要素に accordion-panel と single-mode の二つのクラスを設定する。