Mutually exclusive <details> elements
Multiple <details> elements which use the same name attribute are mutually exclusive. When one member of the group is opened, all other members are closed.
Overview
Multiple <details> elements which use the same name attribute are mutually exclusive. When one member of the group is opened, all other members are closed.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 120 | 120 | 130 | 17.2 | 120 | 17.2 | |
| HTML attribute | ||||||
name | 120 | 120 | 130 | 17.2 | 120 | 17.2 |
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Syntax
HTML
<details name="faq">
<summary>Question 1</summary>
<p>Content of Answer 1</p>
</details>
<details name="faq">
<summary>Question 2</summary>
<p>Content of Answer 2</p>
</details>Live demo
exclusiveaccordion
same name attribute has details is 1 onlyOpenexclusivebehavior to.
PreviewFullscreen
Name with / none. comparison
behavior. Difference line upconfirm. with Name attribute. none.
PreviewFullscreen
Use cases
Using Mutually exclusive <details> elements
Multiple <details> elements which use the same name attribute are mutually exclusive. When one member of the group is opened, all other members are closed.
Cautions
- May not be supported in older browsers.
Accessibility
- Verify how this element is announced by screen readers.
Related links
Powered by web-features