Webサイトの表現のひとつにアコーディオンというものがあります。
アコーディオンとは見出しや概要だけ表示し、開閉するまで隠されているというものです。
よくある質問などでよく見られる表現手法です。
そして、このアコーディオンはjQueryを使い実装する方法がよく知られていますが、実はCSSだけでも実装することが出来るんです。
そこで、この記事ではjQueryを使わず、CSSだけでアコーディオンを実装する方法をご紹介したいと思います。

CSSだけでアコーディオンを実装する

jQueryを使わず、CSSだけでアコーディオンを実装するサンプルコードです。

実装サンプル

HTMLはこちら。

<div class="accordion">
    <p class="accordion-title"><label for="accordion1">ここをクリックすると開きます。</label></p>
    <input type="checkbox" name="accordion1" id="accordion1">
    <p class="accordion-text">この部分のテキストは隠されていました。</p>
</div>
<div class="accordion">
    <p class="accordion-title"><label for="accordion2">ここをクリックすると開きます。</label></p>
    <input type="checkbox" name="accordion2" id="accordion2">
    <p class="accordion-text">この部分のテキストは隠されていました。</p>
</div>

CSSはこちら。

.accordion-text{
    display: none;
}
.accordion input[type="checkbox"]{
    display: none;
}
.accordion input[type="checkbox"]:checked + .accordion-text{
    display: block;
}

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

コードの解説

アコーディオンで表示する部分（.accordion-text）は、通常時は非表示（display: none）にしておきます。

.accordion-text{
    display: none;
}

この表示、非表示はチェックボックスを使って切り替えます。
チェックボックスがチェック状態になった時だけ、CSSの値を切り替えて内容を表示します。

.accordion input[type="checkbox"]:checked + .accordion-text{
    display: block;
}

+のセレクタを使うことで、チェックボックスにチェックが入っている時に次のタグ（兄弟要素）を選択し、そのタグを表示（display: block;）状態にすることが出来ます。

アコーディオン自体にチェックボックスは不要なので、非表示にします。

.accordion input[type="checkbox"]{
    display: none;
}

【アニメーション付き】CSSだけでアコーディオンを実装する

先ほどご紹介したものはアニメーション無しのアコーディオンの実装方法でした。
続いてご紹介するのはCSSだけで実装するアニメーションありのアコーディオンです。

実装サンプル

HTMLはこちら。

<div class="accordion">
    <p class="accordion-title"><label for="accordion1">ここをクリックすると開きます。</label></p>
    <input type="checkbox" name="accordion1" id="accordion1">
    <p class="accordion-text"><span>この部分のテキストは隠されていました。</span></p>
</div>
<div class="accordion">
    <p class="accordion-title"><label for="accordion2">ここをクリックすると開きます。</label></p>
    <input type="checkbox" name="accordion2" id="accordion2">
    <p class="accordion-text"><span>この部分のテキストは隠されていました。</span></p>
</div>

CSSはこちら。

.accordion-text{
    display: grid;
    transition: grid-template-rows 0.5s;
    grid-template-rows: 0fr;
}
.accordion input[type="checkbox"]{
    display: none;
}
.accordion-text span{
    overflow: hidden;
}
.accordion input[type="checkbox"]:checked + .accordion-text{
    grid-template-rows: 1fr;
}

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

コードの解説

アニメーションありのアコーディオンの場合、
アコーディオンで表示する部分（.accordion-text）は、通常時は非表示です。display: grid;を使ってグリッドレイアウトを適用し、grid-template-rows: 0fr;を設定することで高さが0になり、内容が非表示になります。
さらに、transition: grid-template-rows 0.5s;を指定しておくことで、高さを元に戻し、表示する際、0.5秒かけて表示するようになります。

.accordion-text{
    display: grid;
    transition: grid-template-rows 0.5s;
    grid-template-rows: 0fr;
}

この高さの切り替えにはチェックボックスを使います。
チェックボックスがチェック状態になった時だけ、CSSの値を切り替えて内容を表示します。

.accordion input[type="checkbox"]:checked + .accordion-text{
    grid-template-rows: 1fr;
}

+のセレクタを使うことで、チェックボックスにチェックが入っている時に次のタグ（兄弟要素）を選択し、そのタグにgrid-template-rows: 1fr;が設定されるようにします。

アコーディオン自体にチェックボックスは不要なので、非表示にします。

.accordion input[type="checkbox"]{
    display: none;
}

まとめ

いかがでしたか？
jQueryを使わなくてもCSSだけでアコーディオンは実装可能です。
jQueryを使うとどうしても処理が重くなりがちです。今はCSSだけでも色んなアニメーションを実装することが出来るようになっています。
今まではjQueryを使ってアコーディオンを実装していた人も、一度CSSだけで実装してみてはいかがでしょうか？