Accordion
Search the component library

Accordion

v1.0.0-beta.2
Download UI Kit v1.9.0

Presents information in a space-efficient format where user's can expand the specific content they are interested in.

Download UI Kit v1.9.0

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

  • Standard trigger guidance
  • General layout guidance
  • Two standard interaction methods

Dependencies

None

Triggers

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.

Usage guidelines

Alignment

Content should be aligned to it’s own column that matches the heading of the accordion. Do not align content to the trigger.

Heading content

Headings may be as simple as basic text or include more complex and interactive elements that represent or control the contents of the accordion.

Auto-collapsing

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.

Changelog

1.0.0-beta.2

  • REMOVED: Incorrect usage guidelines
  • ADDED: Documentation around Auto-collapsing

1.0.0-beta.1

Initial version