アコーディオンパネルのオーバレイ表示バージョン。

アコーディオンパネルのオーバレイ表示バージョン。dt 要素をクリックした時に、対応する dd 要素を、dt 要素の下ではなく、全画面表示する。

デモページを表示

CSS

補足

• 33行目以降：オーバーレイ表示に関する設定。
• 51行目以降：動的に追加しているオーバーレイを閉じるボタンの設定。
• レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

jQuery

補足

• 5～6行目：オーバーレイ表示する dd 要素に閉じるボタンを動的追加し，selected クラスを追加してオーバーレイ表示。
• 10～12行目：動的追加した閉じるボタンを削除し、selected クラスの付いたオーバーレイ表示されている dd 要素を非表示にしている。
• デモページで使用している jQuery のバージョンは 1.12.4 。

HTML

補足

• dl 要素に overlay-panel クラスを付けている。

関連投稿

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