Mutually exclusive <details> elementsBaseline · Newly available

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.

Works in the latest version of every major browser, but older devices may not support it yet. Baseline since Sep 3, 2024.

How to use ↓Compare browsers

Browser support

DesktopChrome

1–119Not supported

120+Supportedsince Dec 5, 2023

Current: 155

Edge

12–119Not supported

120+Supportedsince Dec 7, 2023

Current: 154

Firefox

1–129Not supported

130+Supportedsince Sep 3, 2024

Current: 157

Safari

1–17.1Not supported

17.2+Supportedsince Dec 11, 2023

Current: 27

MobileChrome Android

18–119Not supported

120+Supportedsince Dec 5, 2023

Current: 155

Firefox Android

4–129Not supported

130+Supportedsince Sep 3, 2024

Current: 157

Safari iOS

1–17.1Not supported

17.2+Supportedsince Dec 11, 2023

Current: 27

How to use

Every current browser supports this, but it only became Baseline on Sep 3, 2024. Use it as a progressive enhancement, or keep a fallback if you support older devices.

Example

HTML

<!-- Opening one closes the others (accordion) -->
<details name="faq">
  <summary>Shipping</summary>
  <p>…</p>
</details>
<details name="faq">
  <summary>Returns</summary>
  <p>…</p>
</details>

Feature detection

JS · check before using

if ("HTMLDetailsElement" in globalThis && "name" in HTMLDetailsElement.prototype) {
  // HTMLDetailsElement.name is available
}

Documentation (MDN)

name ↗

Specification

html.spec.whatwg.org#attr-details-name ↗

Sub-features

Support for each part of the feature (2). The overall table above shows when the whole feature works.

Sub-feature	Chrome	Edge	Firefox	Safari	Chrome Android	Firefox Android	Safari iOS
HTMLDetailsElement.name	120	120	130	17.2	120	130	17.2
details.name	120	120	130	17.2	120	130	17.2