CSSのみでアコーディオンパネル

javascriptでクラス付け外しする方が楽だとおもいますが、cssだけでもできると聞き、実行。

:chekedという擬似要素を使用します。:focusや:activeでできないっけ？と思ってたら:chekedでした。

MDNのサイトで詳細のってます developer.mozilla.org

当ブログのモバイル用メニューは、ハンバーガーメニューで同じようなことを実装して、CSSのみで作っているのですが、複数となるとその分id名を増やさないといけないので、たくさん項目が増えれば増えるほど面倒かもしれません。

See the Pen cssのみでアコーディオン by Micche (@micche) on CodePen.

原理はチェックボックスをオンにしたときに要素を表示。

そのままパッと表示するでは芸がないのでアニメーションをつけるために、高さや透明度・背景・アイコンの回転などをtransitionでつけています。

paddingを0から16pxにし、文字が上から出てきてるように見せかけています。

要素の高さが固定なので、文が多い時はスクロールするように設定。

アコーディオンメニューの骨組み・CSS参考:CSSLayOut

CSS Onlyのハンバーガーメニューの作り方 micche-labo.hatenablog.com