Accordion Intent and Usage
Accordions are well-suited for handling a large volume of content on a page without it becoming too visually overwhelming. Surfacing the title of a section only allows the user to navigate to (expand) particular sections of interest.
They allow users to easily scan past or skip content that does not apply to them. This accommodates a limited number of "levels" — just a parent (the section header) and child (content that displays when an accordion section is expanded).
Accordion Design Guidelines
- Accordions have fixed colors for a simple, consistent experience. When expanded, unique formatting applies to differentiate a closed section from an open section.
- Chevrons further serve to communicate to the user when a section is open or closed.
Accordion Content Guidelines
- Alphabetize lists of accordions by section header.
- Use H3–H6 headings to break up section content.
- Strive to keep content under headings to no more than 300 words.
- Refer to Style Guides for general content editing specifications.
Accordion Layout Guidelines
- Put accordions in a separate section just for the accordions.
- Uncheck the box that says "Vertical space between inner elements" in the Configure Section box.
Exceptions to this practice may occasionally be warranted for aesthetic or spacing reasons on certain pages.
Accordion Examples
Title
One-Column Accordion Title
H3 Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pellentesque euismod ante, vel pellentesque orci malesuada sit amet. Donec ut egestas libero. Phasellus condimentum tellus quis euismod auctor.
- bullet one
- bullet two
- bullet three
Italicized and bolded text. Hyperlink.
Quoted text with subtitle inline format applied. - GovWebworks
H3 Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pellentesque euismod ante, vel pellentesque orci malesuada sit amet. Donec ut egestas libero. Phasellus condimentum tellus quis euismod auctor.
Title
One-Column Accordion Title
H3 Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pellentesque euismod ante, vel pellentesque orci malesuada sit amet. Donec ut egestas libero. Phasellus condimentum tellus quis euismod auctor.
H3 Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pellentesque euismod ante, vel pellentesque orci malesuada sit amet. Donec ut egestas libero. Phasellus condimentum tellus quis euismod auctor.
Title
One-Column Accordion Title
H3 Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pellentesque euismod ante, vel pellentesque orci malesuada sit amet. Donec ut egestas libero. Phasellus condimentum tellus quis euismod auctor.
H3 Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pellentesque euismod ante, vel pellentesque orci malesuada sit amet. Donec ut egestas libero. Phasellus condimentum tellus quis euismod auctor.
Examples of What NOT to Do
Although the flexibility of your layout builder within the content management system supports accordion layouts as shown below, side-by-side accordions are not recommended. Because each accordion section opens independently, putting sections side-by-side will cause jarring behavior when users interact with them, creating unused white space while pushing other content on the page down. It is generally recommended that accordions always sit in single-column (full width) sections only.
Title
Two-Column Accordion Title
H3 Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pellentesque euismod ante, vel pellentesque orci malesuada sit amet. Donec ut egestas libero. Phasellus condimentum tellus quis euismod auctor.
Title
Two-Column Accordion Title
H5 Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pellentesque euismod ante, vel pellentesque orci malesuada sit amet. Donec ut egestas libero. Phasellus condimentum tellus quis euismod auctor.
Title
Two Column Asymmetrical Wide Accordion
Sample Header 3
Lorem ipsum
Title
Two-Column Asymmetrical Narrow Accordion
Text without subheader.
Title
Three-Column Accordion
H3 Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pellentesque euismod ante, vel pellentesque orci malesuada sit amet. Donec ut egestas libero. Phasellus condimentum tellus quis euismod auctor.
Title
Three-Column Accordion
H3 Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pellentesque euismod ante, vel pellentesque orci malesuada sit amet. Donec ut egestas libero. Phasellus condimentum tellus quis euismod auctor.
Title
Three-Column Accordion
H3 Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pellentesque euismod ante, vel pellentesque orci malesuada sit amet. Donec ut egestas libero. Phasellus condimentum tellus quis euismod auctor.