← Back to release summary

Accordion pattern using name attribute on <details> elements

Category
DOM
Type
New or changed feature
Status
Enabled by default (Chrome 120)
Intent stage
Start prototyping

Summary

This feature adds the ability to construct exclusive accordions using a sequence of HTML <details> elements. It adds a name attribute to the <details> element. When this attribute is used, multiple <details> elements that have the same name form a group. At most one element in the group can be open at once.

Motivation

Developers regularly use accordions on the Web. Today, that generally means that they build their own widget rather than using a widget provided by the platform, either because there is no widget for exclusive accordions, or because the existing widget for disclosures and non-exclusive accordions does not meet their needs (most likely due to stylability). This proposal is suggesting that we add features for exclusive accordions to the platform. Doing so would help users because it would make (or at least would enable making) the user experience more consistent, and generally better, in a number of areas: * keyboard shortcuts and focus handling, * exposure via ARIA to assistive technology, and * integration with browser features such as find-in-page. Reducing the need for developers to build their own widgets should also reduce the size of pages that use such widgets, which reduces the time and bandwidth needed for users to load those pages. This work is also related to work to (a) improve the styleability of <details> and <summary> elements and (b) fix some existing accessibility problems with the <summary> element.

Standards & signals

Explainers: https://open-ui.org/components/accordion.explainer

View on chromestatus.com