[Proposal] Support “name” attribute in <details> for pure HTML “only-one” accordions

Proposal: Add a name attribute to the <details> element, for example, <details name="group-1">. If multiple <details> elements in a page have the same value for their name attribute, then expanding/opening/disclosing a <details> element of that name will collapse/close/undisclose all the other <details> elements with a matching name.

This is analogous to how a group of <input type="radio" name="group-1"> elements works. On the contemporary web, radio inputs can and are used to implement pure HTML+CSS only-one accordions; however semantically they are a hack.

Often one wants to express a list of <details>/<summary> with the ability to disclose one element and undisclose the others automatically. This addition of a name attribute to the <details> element would achieve that user experience in pure HTML while maintaining the intended document semantics.

The attribute could alternately be called group or something else; name is used in this demonstration to match the radio input grouping attribute.

A minimal demonstration implemented in JavaScript is live at https://www.fitzsim.org/details-name-prototype.html.

An equivalent radio-input-based approach which works on the contemporary web is available at https://www.fitzsim.org/radio-accordion-example.html. It shows that the HTML and CSS need to be full of hacks to achieve the same effect as would a <details> name attribute.

Spoke to a few people, and this appears to be covered by:

Which was merged into HTML.

Apparently it’s been implemented in WebKit already, and, looking at the PR, bugs have been filed on all the relevant user agents.

fitzsim is there anything missing from what is already in HTML that you are proposing here?

No, I just did not search hard enough. I checked MDN and did web searches, and tested Chromium, and Firefox nightly, but I guess I am still a little early for the actual implementation, but I did not check https://html.spec.whatwg.org (duh!). I did not have the “exclusive accordion” terminology during my search. There are so many examples of this concept, even non-JavaScript implementations, and none of those blogs mentioned this having been merged, I guess due to the recency.

Wow, reading Exclusive Accordion (Explainer) | Open UI it really looks like my proposal was copied from that, but I wrote it up independently, I swear! I have wanted this feature for about four years since attempting to implement an HTML+CSS-only accordion in a product web UI. Recently, a friend of mine bumped into this too, and I told him I would file a bug, so I wrote up this proposal. FWIW, I considered the scope question and I think the standard made the right call to recommend but not mandate the containing element.

Anyway, I will follow 1856460 - implement <details name=""> attribute (exclusive accordion). The name attribute is exactly what I have been wanting; thanks for pointing out it has been merged into HTML! This topic can be closed.

Ok, cool. And yeah, it makes sense you would land at the same or similar solution. Great to hear your use case was addressed.