Accordion
A disclosure component using the native <details> and <summary> elements.
Preview
Open by Default
Preview
This section starts open
Add the
open attribute to the <details>
element to expand it on page load.
This section starts closed
Click the summary to toggle open and closed.
Code
HTML
...
<details class="vui-accordion-item" open>
...
Browser Compatibility
| Feature | Chrome | Edge | Firefox | Safari | Notes | Source |
|---|---|---|---|---|---|---|
<details>
Broad support
|
12+ | 79+ | 49+ | 6+ | Firefox before 57 had an issue with default-open details when an active CSS animation was applied. | MDN |
<summary>
Broad support
|
12+ | 79+ | 49+ | 6+ | Stable support with no major notes in MDN BCD. | MDN |
details[name]
Broad support
|
120+ | 120+ | 130+ | 17.2+ | Needed for exclusive accordion groups without JavaScript. | MDN |