details要素のname属性を試す

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.

3. 参考