Accordion

List of expandable Details elements

Demo

API

Tag

Name Type Content
m-accordion Custom tag Details children only

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 programmatic enforcement or a reflection of state:

// Programmatic
// State (using Vue)

Accessibility

All accessibility recommendations apply to the Details children.