Also known as:
ExpandableAccordionShow and hideRevealDisclosure
Collapsible
Collapsibles are used to collapse and expand content inline on a page. This lets users progressively disclose information as desired.
Need to know
- 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.
Options
- 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:
- Accordion: a collapsible group that only allows 1 section to be open at a time.
- Show/hide button for outside of the collapsible group.
To keep in mind
- 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
- Use a table when there’s a consistent heading and tabular data.
See also
- You might want to show and hide text with truncation using a control that says “Show more” or similar. We don't yet support that and it might belong to the Text component instead.