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.
Accordion Best Practices
- Accordions should contain one topic per accordion.
- The accordion title should describe the content inside.
- If you need to cover more than one topic, don't use an accordion.
- Headers/titles must be simple and clear
- Headers/titles must be descriptive of the accordion content
- 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.
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.