【HTMLだけで実装】details要素とsummary要素でアコーディオンを作成する方法

なやむくん

jsが難しくてアコーディオンの作り方がわからない

なやむさん

アコーディオンの作成方法を知りたい

などの疑問や悩みを解決してまいります。

用語の説明や、Q＆Aによく使用されるアコーディオン機能ですが、HTMLだけでも実装が可能なのです。

HTMLだけでもアコーディオンが実装できるなんてやばいですよね…！

今回はHTMLだけでアコーディオンを作成していく方法について解説していきます。

Table of Contents

アコーディオンの完成例

See the Pen アコーディオン【HTMLのみ】 by koutarou mori (@koutarou-mori) on CodePen.

HTML解説

コードは以下のようになっています。

<body>
    <details>
        <summary>タイトルが入ります。</summary>
        <p>
            本文が入ります。本文が入ります。本文が入ります。
        </p>
    </details>
</body>

これだけでアコーディオンが実装できるのはすごいですよね…！

今回アコーディオン作成において必須とする要素がdetails要素とsummary要素です。

これはセットで使用するので覚えておきましょう。

details要素

details要素は、折りたたみウィジェットを作成します。

<details>: 詳細折りたたみ要素 - HTML: HyperText Markup Language | MDN

アコーディオンが開閉する際は、details要素にopen属性が付与されます。

なので最初から開いた状態にしたい場合は、open属性を指定します。

<body>
    <details open> <!-- open属性を指定することで最初から開いた状態になる -->
        <summary>タイトルが入ります。</summary>
        <p>
            本文が入ります。本文が入ります。本文が入ります。
        </p>
    </details>
</body>

みつた

details要素内に、次に説明するsummary要素を含めないと機能しないので注意してください。

summary要素

summary要素は、details要素のタイトルや用語などを示す際に使用します。

<summary>: 概要明示要素 - HTML: HyperText Markup Language | MDN

summary要素を指定しないとアコーディオンとして機能しないので注意してください！

開いた後の内容はsummary要素の下に記述します。

みつた

今回はp要素を使用しましたが、ul要素、ol要素でリストを入れてもOKです！

CSS追加したアコーディオン

HTMLだけだとさすがに味気ないので、CSSも加えてみました。

See the Pen アコーディオン【HTML、CSSのみ】 by koutarou mori (@koutarou-mori) on CodePen.

デフォルト表示のタイトル横の三角形は、summary要素にlist-style:プロパティを指定することで変更することができます。

details summary {
    position: relative;
    list-style: none; /* デフォルトの三角形を削除 */
}

今回は疑似要素を使用して「+」「-」を表示しています。

details summary::before {
    position: absolute;
    content: '';
    top: 50%;
    left: -20px;
    transform: translateY(-50%);
    background-color: #222;
    border-radius: 10px;
    width: 3px;
    height: 15px;
}
details summary::after {
    position: absolute;
    content: '';
    top: 50%;
    left: -25.5px;
    transform: translateY(-50%);
    background-color: #222;
    border-radius: 10px;
    width: 15px;
    height: 3px;
}

先程説明しましたが、アコーディオンが開かれるとdetails要素にopen属性が付与されるので、open属性が付与されたら縦線は非表示にして「-」にする動きを作成しています。

details[open] summary::before {
    content: none;
}