Exclusive accordions without JavaScript
Making only one accordion panel open at a time required JavaScript to listen for toggle events and close all other open details elements. The name attribute on details elements creates a mutually exclusive group — the browser handles closing others automatically.
2 <summary>Question 1</summary> ...
3</details><details name="faq">
4 <summary>Question 2</summary> ...</details>
2document.querySelectorAll('details').forEach((d) => {
3 d.addEventListener('toggle', () => {
4 if (d.open) others.forEach(o => o.open = false);
5 });
6});
Browser Support for Details name
This feature is well established and works across many devices and browser versions. It has been available across browsers since 2025.
Zero JavaScript
The browser closes other open details in the same name group automatically. No toggle listeners, no forEach loops, no state management.
Works like radio buttons for content
details elements with the same name value form an exclusive group — exactly like radio inputs with the same name. Opening one closes the others.
Accessible by default
details and summary are semantic HTML. They are keyboard navigable and understood by screen readers without extra ARIA attributes.
How it works
The <details> element is a native disclosure widget — clicking the <summary> toggles it open and closed. But by default, multiple details elements are independent. Making only one open at a time required attaching toggle event listeners that would close all siblings whenever any one opened.
Adding a name attribute groups details elements together. When one opens, the browser automatically closes any other open details with the same name. The behavior is identical to how radio inputs with the same name form an exclusive selection group. It works with keyboard navigation and screen readers without any extra ARIA.