Accordion
Group of collapse elements, with single or multiple expanded at once.
Note that support for having one <details> element open at a time (done with the
name attribute) is newer than the
<details> element itself, and not as
widely supported.
Accordion items use role="region" for proper semantics and to distinguish them from dropdown menus
(which also use <details> elements). This ensures accordions take full width while dropdown
menus remain compact.
Structure
The accordion is made of multiple <details role="region"> elements (collapses) with a
<summary> element (trigger) inside each, and a <div> element
(content) that is displayed when the <details> is open.
The role="region" attribute is required for proper accordion styling and semantics.
A shared name attribute can be added to the <details> elements to
make sure that only one of them is open at a time.
Examples
Variants
The accordion can be configured to have one or multiple items open at once.
By default, all items can be opened at once. To make sure that only one item is open at a time, add a shared
name attribute to the <details> elements.