Exclusive accordion

[LeaVerou]

Group <details> elements so that only up to one in the group can be open at a time.

Code sample

<details open name="sidebar_panel" id="main_info">
	<summary>Main info</summary>
	<!-- controls -->
</details>
<details open name="sidebar_panel" id="style_settings">
	<summary>Style</summary>
	<!-- controls -->
</details>

MDN URL:

No response

Specification URL:

whatwg/html#9400

Any other links?

• TAG review
• Open UI Exploration
• Chrome Status

How stable is this feature?

Future (No implementations yet)

Type of feature

HTML attribute

What focus area does this feature fall under?

Interactivity

Details

The name attribute groups creates groups of <details> elements, where opening one closes the others, allowing easier implementation of accordions.

[ssg]

Duplicate elements with the same ID's seem to be against the HTML spec. A fieldset like container seems to be a better way to approach this.

[LeaVerou]

They do not share the same id.

[ssg]

That's not what the example shows?

[LeaVerou]

Typo! Fixed now, thanks.