全国対応！外注・下請けのホームページ制作会社をお探しの会社様。
人員リソース不足、技術不足でお困りなら外注・下請け専門のランランドにお任せ下さい
Web blog WEBブログ
【CSS：アコーディオンメニュー】アクティブなコンテンツのみ表示する
2018.04.17
※この記事は2018年04月17日時点の情報をもとに作成されました。
こんにちは、コーダーの兼山です。
前回は、ノーマルなアコーディオンメニューを紹介しました。
今回は、アクティブなコンテンツのみ表示するアコーディオンメニューを紹介します。
デモ
ポイント
アクティブなコンテンツのみ表示する際のポイントは、
① HTML側のlabelの「for=””」と、inputの「id=””」を同じにすること。
② inputは「type=”radio”」にする。
③ inputに「name=”共通の名前”」を指定する。
まとめ
レスポンシブでのコーディング時や、
javascriptの指定が複数になってしまっている場合などに活用してみてください。
ご相談・カスタマイズご依頼
弊社では上記ブログ内容にある修正・カスタマイズのご依頼も承っております。
ご自身で行ってみて上手くいかない場合などこちらよりお気軽にご相談ください。
この記事を書いた人 兼山 暖美 エンジニア
この記事を読んだ方はこんな記事も読んでいます
こんにちは。コーダーの兼山です。 今回はドラッグで左右の比較表示ができるjQueryプラグイン「twentytwenty…
