HTML・CSSのみで開閉アコーディオンを作る【JS不要簡単】
CSSのみでアコーディオンを作成したい！閉じるボタン、開くボタン等、開閉に合わせて装飾をさせたい！矢印をつけたい！
CSSでアコーディオンを実装したが、動かない。。
上記のような疑問に回答します。
本記事ではJS、jQueryなどを使わず、CSSのみでアコーディオンを作成するやり方について解説します。
コードペンサンプルを公開。
See the Pen CSSのみアコーディオン開閉 by Kohei (@kouk05) on CodePen.dark
先ほどの疑問が上記コードペンをコピペする事で全て解決出来ます！
内訳としては以下になります。
クリック開閉動作に関してはHTMLのチェックボックスを使用
チェックボックスをクリックしてチェックさせた時、チェックを外した時でコンテンツを表示・非表示しようという仕組みです。
ただし、チェックボックスは正直表示して欲しくないですよね。。
そういった場合はlabelタグを使う事で解決出来ます。
labelはチェックボックスのinputタグを関連付させる事ができるので、labelをクリックしたらチェックボックスも動作させる様に出来ます。
※関連付けさせるためにinputのid名、labelのfor名を同じにしましょう。おそらくアコーディオンが開かない状況になってる人は関連付されてない、同じ名前が重複している可能性があります。
あとはCSSでlabelを表示した状態で、チェックボックスのinputタグを非表示。チェックボックスのチェック時、チェックを外した時でコンテンツを表示・非表示させればアコーディオンの完成です！
開閉時で装飾を変えよう。
紹介のコードペンデモでは矢印を開閉時に上向き、下向きに変わるよう、装飾しています。
これも単純にCSSで矢印の画像を背景画像として記述。チェック・チェックを外した時で画像を切り替えています。
まとめ
以上で冒頭の疑問が解決出来たかと思います。色々な状況・環境でJSが使えなかったりする時、CSSだけで簡単にアコーディオンが作れるのでとても便利です。
解説を終わります。
