All major browsers now support the name attribute for the <details> element.
This attribute enables multiple
<details>elements to be connected, with only one open at a time. This allows developers to easily create UI features such as accordions without scripting. The name attribute specifies a group name — give multiple<details>elements the same name value to group them. Only one of the grouped<details>elements can be open at a time — opening one will cause another to close.<details>elements don't have to be adjacent to one another in the source to be part of the same group.