CSSすら不要！htmlの「detailsタグ、summaryタグ」でアコーディオン

作成日 2021.01.07
更新日 2022.04.09
html
html5

HTML5から追加されてる detailsタグ、summaryタグを使えばcssも使用せずhtmlの記述だけで簡単にアコーディオンや折りたたみメニューを作ることができます。
ほとんどの主要ブラウザで使用できますが、IEには対応していません。

1. 環境
2. detailsタグ、summaryタグ
3. サンプルコード

環境

OS windows10 64bit
chrome 86.0.4240.198

detailsタグ、summaryタグ

HTML5から追加されてる detailsタグ、summaryタグを使えばcssも使用せず簡単にアコーディオンや折りたたみメニューを作ることができます。
detailsタグで囲んだ部分がアコーディオンとして設定されます。
summaryタグはアコーディオンの見出し部の役割をしますが、summaryタグがなくてもアコーディオンの動きをします。
ほとんどの主要ブラウザで使用できますが、IEには対応していません。

<details>
    <summary>アコーディオンのタイトル</summary>
    アコーディオンの内容
</details>

サンプルコード

detailsタグとsummaryタグを使用するだけで実装できますが、cssを加えて少しカスタマイズしています。

<section>

    <style>
        details {
        transition: .5s;
        background: #f2f2f2;
        padding: 20px;
        border-radius: 3px;
        border: #e6e6e6 1px solid;
        }
        details p {
        font-size: 0.8em;
        padding-left: 1em;
        }_
        /* タイトル部の矢印を消す */
        /* Chrome、Safari以外 */
        summary {
        display: block;
        }

        /* Chrome、Safari */
        summary::-webkit-details-marker {
        display: none;
        }
    </style>

    <details>
        <summary>アコーディオンのタイトル</summary>
        <p>アコーディオンの内容<br>
        Lorem ipsum dolor sit amet, consectetuer adipiscing 
        elit. Aenean commodo ligula eget dolor. Aenean massa. 
        Cum sociis natoque penatibus et magnis dis parturient 
        montes, nascetur ridiculus mus. Donec quam felis, 
        ultricies nec, pellentesque eu, pretium quis, sem.
        </p>
    </details>

</section>

アコーディオンのタイトル

アコーディオンの内容
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.