[CSSのみ]簡単に作れるアコーディオンメニュー

CSSのみでアコーディオンメニューを作成します。
要素の高さを固定せず、レスポンシブ対応です。

コードの利用は自己責任でお願いします。

サンプル集も作りました。

[コピペでOK!]CSSのみで作るアコーディオンメニュー[サンプル3種]

CSSのみで作るアコーディオンメニューの様々なサンプル集です。気が向いた時に追加していきます。コード自体の詳細や解説は以下の元記事をご覧ください。シンプル ...

サンプル
HTML
CSS
簡単な解説

サンプル

このアコーディオンについて１: 要素に合わせた高さになります。
レスポンシブ対応です。

このアコーディオンについて２: 画像なども入ります。

このアコーディオンについて３: 閉じる時にアニメーションが一瞬なのは仕様です。
高さオートの場合にはどうしてもこうなってしまいます。
開閉両方にアニメーションを設定したい場合は高さを固定するかJavaScriptを使いましょう。

HTML

<dl>
    <input id=“ac1” type="checkbox">
    <label for=“ac1”>
        <dt>
            タイトル
        </dt>
    </label>
    <dd>
        内容
    </dd>
</dl>

inputのidとlabelのforに同じものを設定します。
紐付け作業はこれだけです。

<input id="qa-1" type="checkbox">
<label for="qa-1">

後はdtにタイトル、ddに内容を入れましょう。

CSS

必要に応じて要素をリセットします。

dl,
dt,
dd {
    margin: 0;
    padding: 0;
}

margin・paddingやbackgroundは適宜変更してください。

dl+dl {
    margin-top: 1rem;
}

dt,
dd {
    padding: 10px;
}

dl {
    position: relative;
    overflow: hidden;
}

dl>input {
    display: none;
}

dt {
    position: relative;
    z-index: 1;
    padding-right: 40px;
    background: #bae8e8;
}

dd {
    position: absolute;
    visibility: hidden;
    transform: translateY(-100%);
    transition: .4s;
    background: #e3f6f5;
}

dl>input:checked+label+dd {
    position: relative;
    visibility: visible;
    transform: translateY(0);
}

dt::before {
    content: '';
    position: absolute;
    width: 20px;
    height: 3px;
    top: 50%;
    right: 10px;
    background: #333;
    transform: translateY(-50%);
}

dt::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 10px;
    width: 20px;
    height: 3px;
    background: #333;
    transition: .4s;
    transform: translateY(-50%) rotate(90deg);
}

dl>input:checked+label>dt::after {
    transform: translateY(-50%) rotate(180deg);
}

上記はクラス名を付けていないため、実際の運用では親要素にクラス名をつける等しましょう。

簡単な解説

checkboxを作成し、labelと紐付け、checkbox自体は非表示にします。

<input id=“ac1” type="checkbox">
<label for=“ac1”>

dl>input {
    display: none;
}

後はチェックされたかどうかでdd要素を変更しているだけです。

dd {
    position: absolute;
    visibility: hidden;
    transform: translateY(-100%);
    transition: .4s;
    background: #e3f6f5;
}

dl>input:checked+label+dd {
    position: relative;
    visibility: visible;
    transform: translateY(0);
}