Newly available Newly available. Verify your target environments before adopting.

Mutually exclusive <details> elements

The name property of the HTMLDetailsElement interface reflects the name attribute of <details> elements. It enables multiple <details> elements to be connected together, where only one for the <details> elements can be open at once. 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. If multiple grouped <details> elements are given the open attribute, only the first one in the source order will be rendered open.

Text and structure

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
api.HTMLDetailsElement.name
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

sectiontoggle

Name attribute in settingspanel. tab styletoggle realize.

PreviewFullscreen

Name with / none. comparison

behavior. Difference line upconfirm. with Name attribute. none.

PreviewFullscreen

Use cases

  • Using Mutually exclusive <details> elements

    The name property of the HTMLDetailsElement interface reflects the name attribute of <details> elements.

Cautions

  • May not be supported in older browsers.

Accessibility

  • Verify how this element is announced by screen readers.

Related links