Accessibility

Accordion

Overview

Accordions are vertically-stacked lists that allows users to expand and collapse additional content.

The collapsible accordion provides a deeper level of content when there are multiple sections required. Each section is revealed one at a time. Sections will automatically collapse when another is expanded. The first item is always expanded on load, the rest are collapsed.  Using the + symbol will expand a section, closing the previous one. The - symbol will collapse a section. 

Variations

Use on either light or dark backgrounds. Background color is provided for both.

Light theme

This is section 1 content.

This is section 2 content.

This is section 3 content.

Dark theme

This is section 1 content.

This is section 2 content.

This is section 3 content.

Read More is used when a section has a large amount of content that can be reduced by using the Reveal/Hide feature. Clicking the text link label, "Read More" will expand reveal the additional content, while "Read Less" will hide it.

This is the intro area for the accordion.  Include part of the text to hook the visitor etc.

This is section content hidden until the Read More button is clicked. This is section content. This is section content. This is section content. This is section content. This is section content. This is section content. This is section content. This is section content. This is section content. This is section content. This is section content. This is section content. This is section content.

Guidelines

Use When

  • Needing to provide more content within the layout without creating an extensively long page.
  • Displaying content that is directly related, or supplemental, to the main idea of the page
  • Designing with limited vertical space and there is enough content to condense

Content

  • Order the accordion titles by priority and importance
  • Keep titles short to avoid wrapping at smaller viewports
  • Use short titles for accordion labels to avoid wrapping
  • Always include a title and subsequent content for each section. All are required
  • Content within accordions can include text, photos, graphics, or other components (i.e. links, buttons, tables)

Additional Notes

  • Accordions examples can be seen in the Specifications section of a Product Page

Authoring

Component

  • Accordion components should be added inside a Simple Container component.
  • Choose between two variants: Collapsible or Read More
  • Select a Theme: Lava (for light) or Midnight (for dark)
  • For Collapsible variant, add a title to each section
  • For Read More variant, add an action label to distinguish the reveal action and the hide action. Ex: "Read More" and "Read Less"
  • After closing the Accordion component, new components can be added inside each section to add content, images or buttons/links
  • Position interactive elements (i.e. Button, Link) within the container far enough from the title area to avoid accidental collapsing

Do not

  • Nest Accordions
  • Create labels so lengthy that they wrap to a second line

author dialog box