Expanders

Usage

An Expander is a container used to organize an overabundance of content and conserve space on the page. Because Expanders can save a large amount of space, they can be extremely useful for mobile interfaces.

Expanders can be used standalone or in a group to hide and reveal different sections of content, providing users with the bigger picture of the content on the page before diving into the details. Important information is shown initially and additional details are revealed upon interaction.

Types

There are two types of Expanders — Standard and Peek-a-boo.

Standard Expanders

Standard Expanders are best used:

• when there is a need for multiple expanding sections on a page
• the revealed content is lengthy or contains form fields
• there is a need for an action within the Expander, such as "Save"

Peek-a-boo Expanders

Peek-a-boo Expanders should be used:

• standalone to hide and reveal a small amount of plain-text content
• when the hidden content is supplementary to the main purpose of the page

Anatomy

Standard Expander

Standard Expanders consist of up to seven different parts.

1. Section: Where both the header and content are contained.
2. Header area: The area inside of a section that contains the section title, preview text and indicator icon. This header is a clickable area to expand and collapse the section.
3. Title: A text label that indicates what content is contained in the section.
4. Preview text (optional): An optional sample of the content contained in the section. Preview text can be useful to display settings that are applied in the content area.
5. Indicator icon: An icon located in the header area that indicates to the user when a section can be expanded or collapsed.
6. Content area: The area that appears when a section is expanded.
7. Action area (optional): An optional area for consistent placement of actions inside of a section.

Peek-a-boo Expander

A Peek-a-boo Expander contains only two parts.

1. Expander action: A link button to "See more" is below the truncated content when collapsed, and a link button to "See less" is below the expanded content.
2. Hidden content: The content that is hidden by default and shown after pressing the "See more" button.

The first two lines of preview text and the title are not included in the component itself, but we highly recommend including them prior to the Peek-a-boo Expander to provide the user with context of what they will be viewing when they press "See more".

For a more detailed breakdown of the sizing and spacing, view the design specs.

States

Default

The default state is the collapsed view of an Expander. It is also the default state of the Expander when the user lands on the page.

Hover

The hover state for Standard Expanders occurs when the user hovers over a section with their mouse. See the Button guidelines for the hover state of the 'See more' action of a Peek-a-boo Expander.

Focus

Focus state appears when the Expander section is currently selected and awaiting action. This is most commonly seen when using a keyboard to navigate. See the Button guidelines for the focus state of the 'See more' action of a Peek-a-boo Expander

Expanded

The expanded state is seen after the user has interacted with the Expander to show more information. On a Standard Expander the section is expanded and the indicator icon is flipped to visualize that the section can now be collapsed. For the Peek-a-boo Expander the button text will now say "See less".

Behavior

We recommend that all Expanders be in the default state when the user navigates to the page. This ensures that as many sections as possible are visible to the user immediately.

By default, all sections can be opened at the same time. If there are any sections that contain actions, then consider limiting the user to opening one section at a time to keep the user focused.

Keyboard navigation

• [Tab] to select an Expander
• [Space] or [Enter] to open/close the selected section
• When open, [Tab] to select interactive elements (input, link or buttons if available)
• [Tab] to select the next Expander

Best practices

Expanding sections

• If opening a section makes the content longer than the viewport, do not auto-scroll to show that content. Auto-scrolling can be disorienting, so is is best to leave the decision to scroll up to the user.
• Expanders work best to focus the user on a single task, or a very small number of closely-related tasks. It is not good practice to nest tables, long forms, or tabs inside an Expander section.
  

Header information

Adding actions

Actions in Expanders are best used for lightweight editing, such as selecting a value for a setting.

Alternate considerations

• Consider using Cards when there is no real benefit to focusing the user on one section at a time.
• Consider using Tabs when the length of the content area exceeds the average user's viewport height or when there are more than a handful of form fields.