details 要素は、開閉可能なコンテンツをマークアップするための要素です。details 要素に新たに name 属性が追加され排他的アコーディオンとして利用できるようになりました。

使い方はラジオボタンのように、同じ name 属性を持つ details 要素をグループ化するだけです。

<details name="group">
  <summary>Group 1</summary>
  <p>...</p>
</details>
<details name="group">
  <summary>Group 2</summary>
  <p>...</p>
</details>

これにより、同じ name 属性を持つ details 要素がすでに開いている場合には、他の details 要素を開くと自動的に閉じるようになります。

今まで JavaScript で実現していた動作が HTML の標準機能のみで実現できるのは嬉しいですね。