諸事情によりJSを使えない/使いたくない、それでもアコーディオンは実装したい…！
という時用に作ったものです。
①1つ選択したら他は非表示にするバージョン
②項目それぞれで開閉を選択できるバージョン
の2種類。
①1つ選択したら他は非表示にするバージョン
See the Pen CSSだけで作ったaccordionパネル01 by Yuki Koide (@yuki_24) on CodePen.
②項目それぞれで開閉を選択できるバージョン
See the Pen CSSだけで作ったaccordionパネル02 by Yuki Koide (@yuki_24) on CodePen.
ポイント
・1つだけ開くものを作る場合はradioボタン、それぞれ開閉できるものを作る場合はcheckboxの利用が便利
・input要素は挙動の管理にだけ利用。表示そのものはdisplay:noneで消してしまう
・ボタン部分にはlabel要素を利用
・E + F （隣接している要素に適用）is 便利
・E ~ F （後にある要素に適用）is 神