Skip to header Skip to main navigation Skip to sub navigation Skip to main content Skip to sidebar Skip to footer

Compass Web Framework

    1. Home
    2. Components
  1. Content
  2. Accordion


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


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:

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:

How to use



All accordions require:

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.

Quick links

View graphic version