<details name='xxx'>でJavaScriptなしでアコーディオンメニューが実装可能に

details要素にname属性をつけるとグループ化することができるようになった。

※2024-07-23時点、Firefox130で対応されれば全モダンブラウザで利用可能になる。

<details name="accordion" open>
  <summary>Item 1</summary>
  <p>aaaaaaaaaaaaa</p> 
</details>
<details name="accordion">
  <summary>Item 2</summary>
  <p>bbbbbbbbbbbbb</p>
</details>
<details name="accordion">
  <summary>Item 3</summary>
  <p>ccccccccccccc</p> 
</details>

デモ

※Firefox130未満では動作しません