MENU
さがす
メニュー
  1. ホーム
  2. CSS
  3. label
  4. CSSのみで作るアコーディオン　サンプルコード　デモ

CSSのみで作るアコーディオン　サンプルコード　デモ

CSS label
2022年4月14日
目次

CSSのみのアコーディオン　デモ

Demo

See the Pen css accordion with css icon by eating2003 (@eating2003) on CodePen.

サンプルコード

<input id="acd-check1" class="acd-check" type="checkbox">
<label class="acd-label" for="acd-check1">アコーディオン1<span class="AcdIcon"></span></label>
<div class="acd-content">
    <p>アコーディオン1の中身</p>
</div>
<input id="acd-check2" class="acd-check" type="checkbox">
<label class="acd-label" for="acd-check2">アコーディオン2<span class="AcdIcon"></span></label>
<div class="acd-content">
    <p>アコーディオン2の中身</p>
</div>
<input id="acd-check3" class="acd-check" type="checkbox">
<label class="acd-label" for="acd-check3">アコーディオン3<span class="AcdIcon"></span></label>
<div class="acd-content">
    <p>アコーディオン3の中身</p>
</div>
/* inputを非表示 */
.acd-check{
    display: none; 
}

.acd-label {
    position: relative;
    display: inline-block;
    width: 100%;
    margin: 0;
    padding: 10px;
    border-bottom: 1px solid lightgray;
    background: #f7f7f7;
    color: black;
    -webkit-tap-highlight-color:transparent;

}

/* アコーディオンアイコン　プラスボタン */
.acd-label .AcdIcon,
.acd-label .AcdIcon::after{
    display: block;
    box-sizing: border-box;
    background: currentColor;
    border-radius: 10px;
}
.acd-label .AcdIcon {
    position: absolute;
    transform: translate(0, -50%) scale(0.9);
    width: 16px;
    height: 2px;
    top: 50%;
    right: 2%;
    transition: 0.4s;
    background-color: gray;
}
.acd-label .AcdIcon::after {
    content: "";
    position: absolute;
    width: 2px;
    height: 16px;
    top: -7px;
    left: 7px;
    background-color: gray;
}

/* アコーディオンアイコン　マイナスボタン */
.acd-check:checked + .acd-label .AcdIcon {
    box-sizing: border-box;
    position: absolute;
    display: block;
    transform: scale(0.9);
    width: 16px;
    height: 2px;
    background: currentColor;
    border-radius: 10px;
    transition: 0.4s;
    background-color: gray;
}
.acd-check:checked + .acd-label .AcdIcon::after{
    display: none;
}

/* アコーディオンの中身 */
.acd-content {
    display: block;
    height: 0;
    margin: 0;
    border: 0;
    padding: 0 10px;
    box-sizing: border-box;
    background-color: transparent;
    opacity: 0;
    transition: 0.4s;
    visibility: hidden;
}

.acd-check:checked + .acd-label + .acd-content {
    height: 50px;
    opacity: 1;
    padding: 10px 20px;
    visibility: visible;
    border-bottom: 1px solid lightgray;
}

.acd-content p {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    border: none;
    box-sizing: border-box;
    vertical-align: top;
}

説明

inputとlabelでアコーディオンを作る

<input id="acd-check1" class="acd-check" type="checkbox">
<label class="acd-label" for="acd-check1">アコーディオン1<span class="AcdIcon"></span></label>
<div class="acd-content">
    <p>アコーディオン1の中身</p>
</div>
/* inputを非表示 */
.acd-check{
    display: none;
}
  • inputとlabelでチェックボックスを作る構造を使う。
  • input自体は非表示にする。
  • 開閉のしくみは、inputのチェックの有無で、labelの中のdiv.acd-content（アコーディオンの中身）のCSSを切り替える。
  • 複数のアコーディオンの区別は、inputのidと、labelのforを同一にすることで1セットになるので、また別名で2セット目、3セット目、と作ることで区別する。

開閉のtransitionの設定

/* アコーディオンの中身 */
.acd-content {
    display: block;
    height: 0;
    margin: 0;
    border: 0;
    padding: 0 10px;
    box-sizing: border-box;
    background-color: transparent;
    opacity: 0;
    transition: 0.4s;
    visibility: hidden;
}

.acd-check:checked + .acd-label + .acd-content {
    height: 50px;
    opacity: 1;
    padding: 10px 20px;
    visibility: visible;
    border-bottom: 1px solid lightgray;
}
inputがチェックされたときと、されていないとき。
display:block;とdisplay:none;で行うとトランジションが効かなくなってします。
ここでは、チェックに限らず両方ともdisplay:block;の状態。
開閉するトランジション(動き)は主に、visibility、height、opacityで行っている。

開閉でアイコンを切り替える

/* アコーディオンアイコン　プラスボタン */
.acd-label .AcdIcon,
.acd-label .AcdIcon::after{
    display: block;
    box-sizing: border-box;
    background: currentColor;
    border-radius: 10px;
}
.acd-label .AcdIcon {
    position: absolute;
    transform: translate(0, -50%) scale(0.9);
    width: 16px;
    height: 2px;
    top: 50%;
    right: 2%;
    transition: 0.4s;
    background-color: gray;
}
.acd-label .AcdIcon::after {
    content: "";
    position: absolute;
    width: 2px;
    height: 16px;
    top: -7px;
    left: 7px;
    background-color: gray;
}


/* アコーディオンアイコン　マイナスボタン */
.acd-check:checked + .acd-label .AcdIcon {
    box-sizing: border-box;
    position: absolute;
    display: block;
    transform: scale(0.9);
    width: 16px;
    height: 2px;
    background: currentColor;
    border-radius: 10px;
    transition: 0.4s;
    background-color: gray;
}
.acd-check:checked + .acd-label .AcdIcon::after{
    display: none;
}
アコーディオンが閉じているとき、開いているときで、プラスとマイナスのアイコン。
CSSのみで作るアイコンを使っています。

下の記事のサンプルからほかのCSSアイコンをコピーしてきて使うこともできます。
あわせて読みたい
CSSアイコン集　よく使いそうなサンプルコードまとめ 【CSSのみアイコンのメリット】 ウェブサイトを作るときにアイコンを表示するための方法はたくさんあります。 その中でもCSSとSVGのアイコンのメリットは多く、アイコン…

iosでタップ時のちらつきをなくす

.acd-label {
    -webkit-tap-highlight-color:transparent;
}
iPhoneのブラウザsafariでアコーディオンのラベル部分をタップした際に、一瞬暗くなってチラつくことがありました。
上のコード、 -webkit-tap-highlight-color:transparent; を指定したところ、ちらつきが解消しました。

まとめ

CSSのみのアコーディオンは、CSSフレームワークやJavascriptのプラグインなどを使わずに実装できるので、余分な機能は無く、軽量であることと、プラグインなどの更新に気を付けなくてよいことが一番のメリットです。
プラス、マイナスのアイコンもCSSなので、かなり軽量なアコーディオンのサンプルです。

しかし、アコーディオンの開閉原理はinputとlabelを使っており、これは本来のhtmlとしての使い方とは異なることからあまり推奨されないという考え方もあります。

サイト全体的ではなく部分的なパーツとして、コピペで使えるサンプルとして使うのに便利なサンプルとなります。
CSS label
CSS input label transition アコーディオン

関連記事

もくじ
TOP
目次
閉じる