Web blog WEBブログ

【CSS:アコーディオンメニュー】アクティブなコンテンツのみ表示する

2018.04.17

こんにちは、コーダーの兼山です。

前回は、ノーマルなアコーディオンメニューを紹介しました。
今回は、アクティブなコンテンツのみ表示するアコーディオンメニューを紹介します。

【目次】

デモ

ポイント

アクティブなコンテンツのみ表示する際のポイントは、
① HTML側のlabelの「for=””」と、inputの「id=””」を同じにすること。
② inputは「type=”radio”」にする。
③ inputに「name=”共通の名前”」を指定する。

まとめ

レスポンシブでのコーディング時や、
javascriptの指定が複数になってしまっている場合などに活用してみてください。

兼山暖美

この記事を書いた人 兼山 暖美 エンジニア