Accordion
What it will look like
When to use
Use the Accordion content type sparingly. Because it hides much of the information, it requires more interaction from a visitor. Below are some cases when you should use this content type.
- When site visitors already know what they're looking for when they come to your page.
- When site visitors are scanning for only a few specific pieces of information.
- When you have many different topics that are standalone pieces (e.g., an FAQ page or a list of definitions).
Keep accordion group heading blank
- The group heading field in the accordion content type is always left blank.
- A traditional blank group heading content type should be used for any H2 tag prior to this content type.
Tips for FAQ (common question) pages
Common question or "frequently asked question" (FAQ) pages should restate information that is available on other pages. Don't use a long FAQ page as a band-aid for non-intuitive page organization & naming. Make sure the questions on this page are actually frequent, not all questions that anyone could ever ask.
When to consider something else
Most of the time, you should use a content type other than the Accordion. The Accordion is similar to the Scannable Paragraph, which is often a better choice. You may also consider using Multicolumn Content when you want to present 2 or 3 equally-weighted options to a reader.
Best practices
Do
- Stack at least 3 Accordions together.
- Use full sentences for headings.
- Keep headings short. Limit them to one or two sentences.
- Use a variety of formats for the body of the Accordion to keep it scannable (bulleted lists, headings & paragraphs).
Don't
- Don't use less than 3 Accordions together.
- Don't hide important information in the body of the Accordion.
- Don't use images in the body of the Accordion.
Resources
Accessibility
Help us improve
Send feedback to the Digital Services Team.