Accordion

Accordions are a list of headers that expand and collapse to reveal hidden content blocks. They help reduce scrolling and shorten pages.

Download CSS for Accordion

Direct Dependencies:

bootstrap.bundle.min.js

root.css

colors.css

typography.css

grid.css

When to use

The accordion and view more/less components share similar features. The main difference is the way that content is revealed and how that changes the information displayed.

Component	Use cases
Accordion	Expands or collapses content contained in collapsible items, such as panels.
View more/less	Reveals or hides contextual content. The content may stop mid-sentence or -paragraph to save space; the continuation of the content is often indicated by an ellipsis (…) combined with phrases like “Read more” or “Show less.”

Usage

Accordions may shorten pages and reduce scrolling, but they also increase a user’s cognitive load. Accessibility is an important consideration, as is whether a user may need to print the page content. Before designing with this component, make sure to use descriptive headers to inform users what the hidden content contains. Additionally, keep information under each category header to a paragraph or less. Accordions are not intended for use with critical information or content that users will need to view.

The default accordion is the single-level. The chevron points down to indicate its collapsed state and up to indicate its expanded state. Accordions can either expand only one accordion row at a time, or with the expand-all or collapse-all function, trigger all accordion rows simultaneously. If all content panels are collapsed, the collapse-all function will be inactive. If all content panels are open, the expand-all function will be inactive.

Standards

Text should be left-aligned.

Left align content to match accordion headers.

Standard Accordion Example

This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

Flush Accordion Example

Placeholder content for this accordion, which is intended to demonstrate the .accordion-flush class. This is the first item's accordion body.

Placeholder content for this accordion, which is intended to demonstrate the .accordion-flush class. This is the second item's accordion body. Let's imagine this being filled with some actual content.

Placeholder content for this accordion, which is intended to demonstrate the .accordion-flush class. This is the third item's accordion body. Nothing more exciting happening here in terms of content, but just filling up the space to make it look, at least at first glance, a bit more representative of how this would look in a real-world application.