An accordion is a vertically stacked combination of a header and content. When an accordion title is selected the associated content is shown or hidden.
Accordions are an advanced web content strategy that should only be used after careful consideration of guidelines and best practices.
To avoid hiding information, the content in a single accordion should be limited to what is described in the header only. Headers must be well-written and describe the content within completely. See Headers and Sub-Headers for more information, including guidelines and best practices.
Advantages and Disadvantages
Advantages of Using Accordions
- Gives users control of the content
- Allows for efficient scanning of available content
- Reduces the need for additional pages with minimal content
- Minimizes need for scrolling through long pages
Disadvantages of Using Accordions
- Risks hiding content – Users may miss important content if it’s hidden inside an accordion
- Makes users work – If you think most users will want to see the content, don’t hide it inside an accordion
- Accessibility – KU CMS Sunflower accordions have been coded with accessibility in mind, but exposed plain text will always be less cumbersome for someone using a screen reader to access your content.
- Printing – Accordions can make it difficult to print a page without additional effort.
How To Create Accordions
Using Body 12 – Accordions
See Body 12 – Accordions for detailed instructions.
Using Body 1 – General Content > Accordion – Body 1
- Create or Edit a Body 1 - General Content section
- Select Add Section to Content Section
- Select Accordions - Body 1View Screenshot
- Enter Accordion Title
- From Style Options tab, select Div or H3 for your Accordion Title depending on header class organization on page
- Enter Accordion Content
- Select Add Accordion Item button to add additional accordions
- Set Save as dropdown to Draft or Published
See Body 1 – General Content for detailed information about the Body 1 - General Content section.
- All content on KU CMS sites must meet accessibility standards. See Accessibility for information, including guidelines and best practices.
- KU CMS - Sunflower accordions have been coded with accessibility in mind, but plain text will always be less cumbersome for someone using a screen reader to access your content.
- All accordions on KU CMS - Sunflower must meet accessibility standards. Do not add your own accordion code. Please contact KU Web Services at firstname.lastname@example.org for assistance with accessible accordions.
Guidelines and Best Practices
Golden Rule for Accordions
- One clear topic per accordion. If you need to cover more than one discrete topic, it should not be an accordion.
Don’t Make Users Work
- In most instances, accordions should be avoided when your audience needs most or all of the content on the page to answer their questions.
- Accordions are best when a clear title tells the user all they need to know about what’s inside allowing them to focus on the topics that matter most to them.
Importance of Accordion Headers/Titles
- Simple and clear headers/titles are essential for accordions:
- Headers/titles must be simple and clear to get the users attention and avoid hiding content
- Headers/titles must be descriptive so users understand what content is available without having to open the accordion
- See Headers and Sub-Headers for more information, including guidelines and best practices.
Limit Accordion Groups to 3 – 4
- As a general rule, there shouldn’t be more than three or four accordions per set (Exceptions: frequently asked questions, instructions, etc.).