Accordion
List of expandable details elements
Demo
Summary
Details about this thing
Summary
Details about this thing
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:
Summary
Details...
Summary
Details...
Summary
Details...
Summary
Details...
Accessibility
All accessibility recommendations apply to the Details children.