WEBサイトでよく使われるパターンにアコーディオンがあります。
アコーディオンはコンテンツとそのラベルで構成されていて、選択するとその展開状態が変化してコンテンツを表示する/非表示する状態を変えることができます。
少し前までは実装にJavaScriptを利用することが多かったですが、details要素で実装できるようになりました。

details要素を使うと、実装に必要なファイル数削減だけでなく、HTMLを簡素化することもできます。
今回はdetails要素の使い方をご紹介します。
合わせてChrome for developersの記事もご紹介しますので、ぜひ参考にしてみてください。

基本のコードの紹介

まずはコードの紹介から。
details要素にsummary要素とコンテンツを含めます。
また、details要素にname属性を付与することで、同じname属性のdetails要素はグループとしてどれか1つが展開できる状態になります。

<details name="accordion-item">
<summary>サマリー要素</summary>
<p>コンテンツが入ります。コンテンツが入ります。</p>
</details>
<details name="accordion-item">
<summary>サマリー要素2番目</summary>
<p>コンテンツが入ります。コンテンツが入ります。</p>
</details>

見え方は以下の通り。（CSSで微調整しています。）
サマリー要素をクリックすると展開状態が変化します。

表示方法のカスタマイズ

summary要素は list-styleプロパティや、list-style-typeプロパティに対応しています。
そのためデフォルトの三角形を任意の形に変更したり、list-style: noneとすることで削除することができます。
また、details要素にあらかじめopen属性を付与することで最初から展開された状態にすることも可能です。

以下はデフォルトからCSSのみ調整をした例。

details要素は以下のように記述しています。あらかじめ展開しておきたい項目にopenをつけます。

<details name="accordion-item" open>
<summary><ion-icon name="rocket-outline"></ion-icon>サマリー要素</summary>
<p>コンテンツが入ります。コンテンツが入ります。</p>
</details>

summary要素の三角形は以下のようにdisplay:list-item;の変更、もしくはlist-styleを打ち消して調整します。

summary {
    display:flex;    /* displayの変更 */
    list-style:none;    /* list-styleの打ち消し */
}

アコーディオン展開時は以下のようにdetails[open]セレクタにstyleを記述することで調整します。

details[open] {
    /* 展開時の記述 */
}
details[open] summary ion-icon {
    rotate:135deg;    /* 展開時アイコンを回転 */
}

※ロケットのアイコンは以下サイトの素材をお借りしています！
ionicons：https://ionic.io/ionicons

Chrome 131以降対応の表示方法のカスタマイズ

Chrome 131 以降では、details要素とsummary要素の構造にdisplayプロパティが使用できるようになったため、レイアウトをより調整しやすくなっています。
これまでは、details要素の開閉状態に関連したスタイルの設定が難しかったのですが、Chrome 131以降、display プロパティを使用できるようになりました。
また、details要素内で展開部分をターゲットにしたスタイルを適用できる ::details-content 擬似要素が導入されており、展開時や折りたたみ時の表示をより制御しやすくなっています。

※対応するブラウザは制限がありますので使用する場合はご注意ください。

以下は::details-content 疑似要素を使って、コンテンツ開閉にアニメーションを付与した例です。

参考元のChrome for developersではより詳しい解説と、水平アコーディオンを実装したサンプルを公開しています。
https://developer.chrome.com/blog/styling-details?hl=ja#demo_2

終わりに

JavaScriptを利用せずアコーディオンを実装できるdetails要素についてご紹介いたしました。
Chrome for developersで紹介されているような高度に見えるアコーディオンもHTML+CSSだけで実装できることはかなり驚きです。

基本構造さえ押さえておけば、CSSアレンジでさまざまなアコーディオンを実装できますので、ぜひ利用してみてください。