Expandables

Expandable sections can be used for displaying non-essential information on a page. They are also helpful for FAQ sections, schedules, and for conserving space on smaller breakpoints by collapsing secondary information.

Repository

StyleView code

Single

Expandable sections include a colored bar, header text, the expand/collapse minicon within a circle with a label reading “Show” or “Hide,” and strokes on the top and bottom to define the expandable area. The entire bar is actionable. The header should clearly indicate what the user will see when the content is expanded (it should not be a call to action). Expand icons stay aligned at the top of the row when the title breaks to multiple lines.

Multiple

Expandable sections grouped together (e.g., FAQs) are stacked vertically, with each row sharing its top or bottom stroke with the adjacent row.

Grey

  • 5% grey background
  • 15px top and bottom padding
  • 15px left and right padding
  • 50% grey stroke top and bottom (default) or all around (optional)
  • Avenir paragraph or H4 heading
  • Pacific Blue minicon and label

White

  • 50% grey or black stroke top and bottom (default) or all around (optional)
  • 15px top and bottom padding
  • 15px left and right padding
  • Avenir paragraph or H4 heading
  • Pacific Blue minicon and label

StatesView code

Collapsed

The default collapsed state should include the expand/collapse minicon within a circle and a label (if space allows). The Show/Hide label can be hidden at mobile widths to prevent titles prematurely breaking on to multiple lines and reduced visual clutter.

Expanded

The expanded states for both the grey and white versions. This stroke should abide by the left and right padding if used.

TypesView code

Default

In the default mode, users are able to have multiple sections expanded at the same time, which allows users to easily compare information that is available in different sections.

Accordion

With the “accordion” mode, users can only view the contents of one section at a time: when a user expands an additional section, the previously-expanded section will collapse automatically.

This can be desirable for maintaining the height of a group of expandable sections, but it can be disorienting when the height of the expandable sections is greater than the height of the user’s viewport (e.g., for users of mobile phones or netbooks), which can lead to off-screen sections closing and shifting all of the content on the screen. For this reason, you should avoid the “accordion” mode if the expanded height of any of the sections is greater than 400px.

Add the data-accordion=”true” attribute to the expandable group to activate the accordion mode.

AccessibilityView code

The function will not discover information hidden by a collapsed expandable, so use good judgement in deciding which information to hide.

Non-javascript users should default to the expanded state. Otherwise, the default state (expanded or collapsed) will depend on the circumstance.

Additional content here about roles and tagging