Collapsible section

Collapsible section delivers large amounts of content (options sets) in a small space through progressive disclosure. The header title give the user a high level overview of the content allowing the user to decide which sections to see or use by clicking that contents label.

When to use

  • Extremely important to focus on one single thing at a time.
  • To organize related information.
  • Reduce scrolling when content is complete selected.
  • When space must be optimized and there are long content. e.g. two pizza halves

Main elements

Header

Contains the section title and is control for revealing the panel.

  • The title should be as brief as possible while still being clear and descriptive.

Icon

Indicates if the panel is open or closed.

Section

Content inside of a section are composed for different associated sets of options.

Usage

Header

The sections are opened and showing the content by default. The header is used to close or open the content by clicking it.

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.

Behaviors

States

The collapsible section allows for a series of states: expand & collapsed.


Did this page help you?