Accordion

Vertically-stacked list that allows users to expand and collapse additional content

Default

Section borders expand to full width of container.

Copy to clipboard
View source in repository View in repository
View in code sandbox View in sandbox

Compact

Reduced spacing around title and content body. Also, smaller font sizes resulting in an overall denser display of content.

Copy to clipboard
View source in repository View in repository
View in code sandbox View in sandbox

Border Aligned

Border aligns to the title text and expand/collapse icon.

Copy to clipboard
View source in repository View in repository
View in code sandbox View in sandbox

Accessibility

To ensure that usage of this component complies with accessibility guidelines:

  • Provide descriptive label for accordion header
  • Be aware that embedding lengthy content in an accordion can be disorienting. When the accordion header expands, it can give the appearance of moving to another page

This component has compliance with WCAG guidelines by:

  • Providing keyboard interactions to:
    • Expand and collapse accordion headers
    • Navigate and reverse navigate through the accordion headers
  • Generating ARIA tags for accessibility, specifically aria-controls, aria-expanded, and aria-hidden