コピペで実装！CSSのみで開閉アコーディオン・テキストやメニュー

CSS

2020.04.102020.05.21

この記事は約4分で読めます。

クリックで表示内容を開閉するアコーディオンメニューなどをCSSのみで実装する方法です。

アコーディオン
- 表示サンプル
- 動きサンプル
実装方法

アコーディオン

表示サンプル

展開する各ラベルの右側に「+」マークを表示し、クリックアクションでクルクルっと「+」が回転します。

: ※画像ですので動きません

動きサンプル

動きは以下の５秒動画を再生してご確認下さい。

実装方法

CSS　と　HTML　のみで可能です。

枠線の形状や色、文字色などお好みに編集してご利用下さい。

CSS

/*アコーディオン開閉表示*/
.accordion_tab {
position: relative;
margin-bottom: 1px;
margin-left: 18px;
width: 90%;
color: #fff;
overflow: hidden;
}
.accordion_tab input {
position: absolute;
opacity: 0;
z-index: -1;
}
/*表示ラベル*/
.accordion_tab label {
position: relative;
display: block;
padding-left:15px;
font-weight: bold; /*太字
line-height: 3;
cursor: pointer;
background-color: #839b5c; /*背景色*/
border-radius: 8px; /*角を丸める*/
}
/*内容*/
.accordion_contents {
color: #000; /*開いた時の内容　文字色*/
max-height: 0;
overflow: hidden;
transition: max-height .50s;
}
.accordion_contents a{
text-decoration:none;
}
/* クリック時に開く */
input:checked ~ .accordion_contents {
max-height: 100%;
}
/* ラベルに「+」アイコン */
.accordion_tab label::after {
position: absolute;
right: 0;
top: 0;
display: block;
width: 3em;
height: 3em;
line-height: 3;
text-align: center;
transition: all .50s;
}
/* 「+」アイコンのアクション*/
.accordion_tab input[type=checkbox] + label::after {
content: "+";
}
.accordion_tab input[type=checkbox]:checked + label::after {
transform: rotate(300deg); /*回転させる*/
}

HTML

クリックで開いたエリアに表示する内容は、なんでもOKです。

<div class="accordion_tab">
<input id="tab1" type="checkbox" name="tabs">
<label for="tab1">ラベル１</label>
<div class="accordion_contents">
<ul>
<li><a href="XXX">MENU１</a></li>
<li><a href="XXX">MENU２</a></li>
<li><a href="XXX">MENU３</a></li>
</ul>
</div>
</div>
<div class="accordion_tab">
<input id="tab2" type="checkbox" name="tabs">
<label for="tab2">ラベル２</label>
<div class="accordion_contents">
<p>サンプルテキスト</p>
</div>
</div>