Accordion

List of expandable Details elements

Demo

API

Tag

Guidelines

Opening all or one

Accordion does not control its Details children; your app does. You can allow all of the Accordion's Details to be open at once (the default behavior) or one at a time. Allowing one open at a time is as simple as removing the open attribute from other open Details. Details publishes a toggle event you can listen to for this.

Here's two examples showing a more imperative solution and a more declarative state-driven solution with Vue:

Accessibility

All accessibility recommendations apply to the Details children.