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, it only styles them. This means more than one details can be open at a time by default. Controlling this behavior can be managed by your app by adding/removing open to the details. Details elements publish a toggle event makes this easy.

It's worth noting that limiting an accordion to one details at a time may result in a poor UX for users who want to reference information in multiple details and would need to constantly re-open them as they do so.

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

// Imperative
// Declarative (using Vue)

Accessibility

All accessibility recommendations apply to the Details children.