Exclusive accordions with details name

Baseline 2024 Reference ↗

Give several <details> elements the same name and the browser keeps only one open at a time. No accordion state script is required.

<details name="faq">
  <summary>Shipping</summary>
  <p>Ships in two business days.</p>
</details>

<details name="faq">
  <summary>Returns</summary>
  <p>Returns are accepted for 30 days.</p>
</details>

Exclusive behavior is not always better. Do not group sections when people may need to compare them or keep several answers open.