1. このページの目的
details要素の name属性を試す。
Chrome 120 から、details要素の name属性を使ってアコーディオンパターンが実装できるようになった。
Firefox では未実装 (2024年6月時点)。
2. HTMLコード
name属性値を統一することによって、複数のdetails要素がグループ化され、1つのアコーディオンになる。
<details name="cookies" open>
<summary>Chocolate chip</summary>
<p>Yum yum chocolate chip.</p>
</details>
<details name="cookies">
<summary>Snickerdoodle</summary>
<p>Yum yum snickerdoodle.</p>
</details>
<details name="cookies">
<summary>Maicenitas</summary>
<p>Yum yum maicenitas.</p>
</details>
<details name="cookies">
<summary>Sugar cookies</summary>
<p>Yum yum sugar cookies.</p>
</details>
2. 実装
同時に開けるのは1つの項目だけ。
Chocolate chip
Yum yum chocolate chip.
Snickerdoodle
Yum yum snickerdoodle.
Maicenitas
Yum yum maicenitas.
Sugar cookies
Yum yum sugar cookies.
name属性を使わない場合は、ここをクリックする(URLにパラメータが追加される)。- 元に戻す場合は、URLからパラメータを削除する。