details要素のname属性を使ってグループ化する
Firefox 130でdetails要素のname属性がサポートされたことで、全主要部(Chrome120、Edge120、Firefox130、Safari17.2)で使えるようになった。
details要素にname属性をつけることでグループ化ができ、アコーディオンの開閉制御を排他的に行うことができるようになった。
<details name="faq">
<summary>Q.これはなんですか?</summary>
<p>これは○○です。</p>
</details>
<details name="faq">
<summary>Q.それはなんですか?</summary>
<p>それは○○です。</p>
</details>
<details name="faq">
<summary>Q.あれはなんですか?</summary>
<p>あれは○○です。</p>
</details>
デモ
Q.これはなんですか?
これは○○です。
Q.それはなんですか?
それは○○です。
Q.あれはなんですか?
あれは○○です。