Accordion - Exclusive Open
By adding a name attribute with the same value to multiple details elements you can force only one to be open at a time, similar to radio buttons, with no JS required.
Demo
All of these are initially closed
This content is initially hidden, but can be revealed by clicking the summary
Only one of these panels can be open at a time.
Opening this one closes the others in this group.
Clicking any one will open it
This content is initially hidden, but can be revealed by clicking the summary
Only one of these panels can be open at a time.
Opening this one closes the others in this group.
But only one can be open at a time
This content is initially hidden, but can be revealed by clicking the summary
Only one of these panels can be open at a time.
Opening this one closes the others in this group.
HTML
<!-- Add the same `name` attribute/value to multiple `details` elements to enforce only one can be open at a time, similar to radio buttons. -->
<details name="foo">
<summary>All of these are initially closed</summary>
<p>This content is initially hidden, but can be revealed by clicking the summary<br>Only one of these panels can be open at a time.<br>Opening this one closes the others in this group.</p>
</details>
<details name="foo">
<summary>Clicking any one will open it</summary>
<p>This content is initially hidden, but can be revealed by clicking the summary<br>Only one of these panels can be open at a time.<br>Opening this one closes the others in this group.</p>
</details>
<details name="foo">
<summary>But only one can be open at a time</summary>
<p>This content is initially hidden, but can be revealed by clicking the summary<br>Only one of these panels can be open at a time.<br>Opening this one closes the others in this group.</p>
</details>CSS
No special CSS required.JS
No JS required.Baseline
CodePen
See the Pen on CodePen.