Collapsible

Collapsibles are used to collapse and expand content inline on a page. This lets users progressively disclose information as desired.

Also known as:

ExpandableAccordionShow and hideRevealDisclosure

We usually start collapsibles in a collapsed position by default so that users can see what's available.
We often avoid accordions, which are a specific type of collapsible that allows only 1 section open at a time and is often an annoying constraint on user interaction.

Collapsible group: a group of related collapsible sections that may be combined or separated by whitespace.
Single collapsible: a standalone collapsible for 1 item of content.
Header:
- Default header: provide plain text for a title to use default styling.
- Custom header: supply your own header content and styling for the header and title.
Lazy-loading: when handling lots of data, you might lazy load collapsible content for performance reasons. This might limit animation.
Sticky header: when the user scrolls down a long way, they can keep context of where they are by looking at the sticky header. They may also collapse a long section easily using the sticky header.

We don't yet support:

Chevron:
- We only support chevron on the right. We show a downwards chevron when section is closed and upwards when open.
Avoid multi-level expansions.
Animation: we animate expansion using a reveal animation (see animation for guidance on timing and variable height animations).

When to use

Use collapsibles when many users want an overview and some users want to dig into specific parts.
Use accordion when it’s extremely important to focus on one single thing at a time.

When not to use