Soft Launch Alert: The Digital Guidelines are a work in progress and subject to updates. Your feedback is highly valued and will help us improve! Digital Guidelines Feedback (Google Form)
Accordions, also called collapsible content, are available in virtually every web content management system (CMS) in use by the State. They can be valuable additions to certain pages, but should be used following some basic guidelines.
When to Use Accordions
- Use accordions on content-rich (long) pages when users are likely to need to interact with one (or a few) available topics.
When Not to Use Accordions
Accordions have many downsides. They can diminish a user's awareness of available content, increase the interaction cost for the user (forcing them to click to get basic information), and make printing tricky.
- Do not use accordions to make your page "pretty".
- Do not use accordions if users are likely to need to digest all or most of the content on the page.
- Do not use accordions just because you think your page is "too long". Scrolling is not a web evil; users are accustomed to scrolling and will do so effectively as long as your content is well organized.
Example: Use Headings Instead of Accordions
In the example below, short FAQ content is shown in both an accordion and as structured content. When the content is presented in an accordion, users have to engage in extra steps (clicking to expand the content) to get access to basic information. When the content is presented using headings and lists, readers can quickly get the information they need without having to do anything extra.
- What are brand colors?
Brand colors are curated colors that represent an organization’s identity. Some of the ways that color is used in Colorado’s brand include:
- Red symbolizes Colorado’s red soil and rocks
- Yellow represents the state's abundant sunshine and the wheat of its plains
- Blue represents critical water
- Is the “green peak” brand still valid?
No. It is being phased out and should not be used on any new materials (print or digital).
Brand FAQs
What are brand colors?
Brand colors are curated colors that represent an organization’s identity. Some of the ways that color is used in Colorado’s brand include:
- Red symbolizes Colorado’s red soil and rocks
- Yellow represents the state's abundant sunshine and the wheat of its plains
- Blue represents critical water
Is the “green peak” brand still valid?
No. It is being phased out and should not be used on any new materials (print or digital).
Explore Patterns & Components
- USWDS Accordion
- W3C Accordion Pattern
- W3C Accordion Example (with code snippet)
- Colorado.gov Accordions