Accordion

The accordion component creates a list of headers that hide or reveal content when a header in the list is clicked.

Examples

Code reference

When to use

Accordions allow content managers to place large amounts of copy into a relatively small space on the page. Accordions are best used to help people find specific topics within a large amount of content. Accordions are a good choice when:

  • You have lengthy content that needs to be displayed in a small space.
  • The content is better visually represented in collapsible categories for easy navigation.
  • The content is not vital to all audiences, or users only need a few specific pieces of content within a page.

Your accordion section topics should be unified under the single theme of the page, but distinct enough to be worthy of their own separate sections. Readers shouldn’t need information from one accordion section to make sense of other sections.

Since accordions are designed to "hide" content, you should not use them if visitors need to see most or all of the information on a page, or there is not enough content to warrant condensing.

When creating accordions, avoid:

  • Lengthy headers: For a better user experience, do not let text wrap more than two lines when viewed on mobile devices.
  • Lengthy content: This will often make the opening/closing animation of an accordion panel erratic.
  • Media-heavy content: Images and videos are best displayed as a block element within the page to avoid formatting/performance issues.

How to use

  • Access t4.vcu.edu and navigate to the page you would like to update.
  • Use the T4 content type "Plugin - Accordion Panel."
  • Enter content into the required name, heading and content elements.
  • To have the accordion open when users access the page, check "True" under "Open by default?" Otherwise, the accordion will be closed by default.

Tips

  • Accordions default to a closed state. Each time a web page is loaded, the accordion will appear closed. To set any accordion to a default open state, set the "Open by default?" option in T4 to true.
  • Linking to an accordion panel by its ID will open it when scrolled to, closing all sibling panels within the accordion.
  • Accordions are keyboard accessible and align with WCAG accessibility guidelines.

Requirements

All accordions require:

  • A name (will only be visible in T4)
  • A heading (this is what users will see)
  • At least one section of content to pull under that heading

Accessibility considerations

Each accordion header must have a unique title that clearly describes the accordion panel content. This is particularly helpful for users of assistive technologies so they have the necessary information to efficiently navigate the content without having to expand every section.