Presents information in a space-efficient format where user's can expand the specific content they are interested in.
Usage Guidelines
Accordions are a good choice for sets of content which should be easily accessible but not necessarily immediately visible. Users are enabled to drill into the specific content they are interested in.
Features
Dependencies
None
Triggers should always follow the pattern of a down pointing chevron for the closed state and an up pointing chevron for the open state. There are two specific styles that are commonly used, but the pattern can be adapted if needed by your specific use case.
Content should be aligned to it’s own column that matches the heading of the accordion. Do not align content to the trigger.
Headings may be as simple as basic text or include more complex and interactive elements that represent or control the contents of the accordion.
By default accordions allow any number and combination of sections to be open at the same time. This can be good for short content or situations where users would want to compare information from multiple sections.
If it would be confusing or unwieldy to have more than one section open the accordion can auto-collapse sections so that only one is open at any time.
The default interaction allows multiple sections to be open simultaneously.
This can be changed to automatically close other sections when the user opens a new section.
Initial version
Accordion