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

目次

関連記事

WordPress プログラミング

【激選】WordPressでよく使うページ種別の条件分岐テンプレートタグをご紹介【コピペ用】

2022.04.02
1065
HTMLCSS プログラミング

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

2021.01.04
3963
WordPress プログラミング

投稿の一覧ページで、過去記事を一番先頭に持ってくる方法【ワードプレス】

2019.11.29
1333
WordPress プログラミング

【簡単】Custom Post Type UI で カスタム投稿タイプのアーカイブページに親ページ(任意の固定ページ)を設定する方法

更新日:2022.04.13
6235