jQuery不要!HTML/CSSだけで作るアコーディオンメニュー

jQuery不要!HTML/CSSだけで作るアコーディオンメニュー

先日、コーディングを担当しているサイトの「よくある質問」ページに、HTML/CSSだけでアコーディオンメニューを実装しました。備忘録として、ここに書き留めておきます。

サイトの雰囲気に合わせて黒文字のシンプルなデザインにしていますが、文字色や背景色を変えてみてもカラフルで可愛らしくなると思います。クリックすると右のプラスがマイナスに、もう一度クリックするとマイナスがプラスになる仕様がお気に入りです(^^)

実装イメージ
HTML
<div class="acd">
<input id="check1" type="checkbox" class="acd-hidden">
<label for="check1" class="acd-open">ここに質問1が入ります</label>
<label for="check1" class="acd-close">ここに回答1が入ります</label>
</div>
<div class="acd">
<input id="check2" type="checkbox" class="acd-hidden">
<label for="check2" class="acd-open">ここに質問2が入ります</label>
<label for="check2" class="acd-close">ここに回答2が入ります</label>
</div>
CSS

.acd {
max-width: 100%;
}
.acd-hidden{
display: none;
}
.acd-open {
display: block;
padding: 30px 60px 30px 0;
cursor: pointer;
margin: 5px 0;
font-weight: 700;
font-size: 1.2em;
line-height: 1.5em;
position: relative;
border-bottom: 1px solid #ddd;
}
.acd-open::before,
.acd-open::after {
content: ”;
width: 20px;
height: 3px;
background: #000;
position: absolute;
top: 50%;
right: 5%;
transform: translateY(-50%);
}
.acd-open::after {
transform: translateY(-50%) rotate(90deg);
transition: .5s;
}
.acd-hidden:checked + .acd-open:after {
transform: translateY(-50%) rotate(0);
}
.acd-close {
display: block;
height: 0;
overflow: hidden;
margin: 10px 0 0 0;
padding: 0;
opacity: 0;
line-height: 1.7em;
transition: 0.5s;
}
.acd-hidden:checked + .acd-open + .acd-close {
height: auto;
opacity: 1;
padding: 10px;
}

HTML / CSSカテゴリの最新記事