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だけで簡単にアコーディオンが作れるのでとても便利です。
解説を終わります。

Ads

関連記事

プログラミング

【簡単】ベーシック認証が設定されてるサイトのログパス解除URLを発行し、共有する方法

2022.02.01
11
WordPress プログラミング

【wordpress.orgにログインできず、プラグインの新規追加・外部へ接続する際の通信がうまくいかない】原因・解決方法を紹介

2022.03.25
132
JavaScript プログラミング

固定ヘッダーでアンカーリンクがずれる・隠れる場合の対処方法 【スムーズスクロール対応】

2020.04.27
448
JavaScript プログラミング

【簡単】ajaxを使って別ページにある一部分のhtmlコードを取得し、読み込む方法【jQuery】

2022.02.18
33