Written by Kasumi

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

目次

関連記事

HTMLCSS

position: sticky;で要素が追従しない時の原因・対処方法

2022.10.06
197
WordPress プログラミング

【プラグイン不要】WordPress・PHPサイトでCSS・JS・画像ファイルのキャッシュを常に自動削除する方法【簡単】

2022.04.09
429
HTMLCSS プログラミング

inputタグのラジオやチェックボックスをボタン画像にする方法

2021.01.04
1154
HTMLCSS プログラミング

CSSで画像の高さを一律にそろえる方法【結論:object-fitを使えば簡単です】

更新日:2021.01.08
3872