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.

External Links