【CSSだけで】アコーディオン メニューをつくる

JSを使わず、CSSだけでアコーディオンメニューをつくります。ついでに開閉で動く三角形もCSSでつくります。

See the Pen
GRqzPYq
by shiramizu (@ryo0613)
on CodePen.

CSS解説


//チェックボックスを非表示
.check{
display: none;
}
.label{
background: #666;
color: #fff;
display: block;
margin-bottom: 1px;
padding: 10px;
position:relative;
width:300px;
}
//チェックなし状態
.content{
border: 1px solid #eee;
height: 0;
opacity: 0;
padding: 0 10px;
transition: .5s;
width:300px;
}
//チェックあり状態
.check:checked + .label + .content{
height: 50px;
opacity: 1;
padding: 10px;
}

heightで指定する理由

heightではなく、display:noneとblockで指定をしても
開閉は問題なく動きます。
しかし、displayで指定した場合アニメーションtransitionが効かなくなるため、
カチカチした動きになります。

注意点

このアコーディオンメニューはheightを指定して設定するため、
複数のアコーディオンをつくる場合、全て表示するコンテンツの高さが同じである必要があります。
(クラスを分けて、height指定を複数つくることもできますが…)

ナビゲーションなど、コンテンツ内の高さが決まっているものならいいですが、
QAなど、テキスト量が変化するものにはおすすめしません。

高さが異なる、テキスト量が増減するものについては、JQでの実装がおすすめです。
JQでの方法についても掲載してますので、よければ参考に↓
矢印が動くアコーディオンメニューをつくる