アコーディオンメニューの作り方

アコーディオンメニューをHTMLとCSSだけで作ってみたのでやり方とコツを残しておきます。

アコーディオンメニュー

クリックで見える情報1

クリックで見える情報2

クリックで見える情報3

HTML

<div class="wrap"> <label for="label1">▼ここをクリック1</label> <input type="checkbox" id="label1" class="swich"/> <div class="content"><p>クリックで見える情報1</p></div> <label for="label2">▼ここをクリック2</label> <input type="checkbox" id="label2" class="swich"/> <div class="content"><p>クリックで見える情報2</p></div> <label for="label3">▼ここをクリック3</label> <input type="checkbox" id="label3" class="swich"/> <div class="content"><p>クリックで見える情報3</p></div> </div>

CSS

:checked<style> .swich{ display: none; } .wrap{ margin: 2em; padding: 0; } .wrap label{ display: block; padding: 10px; background-color:#073365; color: #fff; font-weight: bold; cursor: pointer; } .wrap .content{ height: 0; padding: 0; overflow: hidden; margin-bottom: 1px; border: 1px solid #fff; } .swich:checked + .content{ height: auto; padding: 10px; background-color: #EDE8E4; } </style>

ポイントと解説

  • labelタグのforと、inputタグのidが同じ名前になるようにセットすることで、labelタグとinputタグが連動する。これでもニューが折り畳まれる仕組みを作る。
  • 複数個メニューをセットした時は、labelタグのforと、inputタグのid名は異なる値を設定すること。
  • checkboxは機能だけを使って画面上では見えないようにするために以下を設定すること。 .swich{ display: none; }
  • メニューを開いている時の表示を設定するために、:checkedを使用することで、クリックでの表示切り替えができるようになる。 .swich:checked + .content{ height: auto; padding: 10px; background-color: #EDE8E4; }

コメント

このブログの人気の投稿

[クレンジングと洗顔方法] 美肌になりたい!

謎解きの魅力

免許証の裏面で意思表示してみた