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 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.

• 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.

Accordion Headers/Titles

• 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.

Using Body 12 – Accordions
See Body 12 – Accordions for detailed instructions.

Using Body 1 – General Content > Accordion – Body 1

1. Create or Edit a Body 1 - General Content section
2. Select Add Section to Content Section
3. Select Accordions - Body 1View ScreenshotScreenshot of Accordions - Body 1
4. Enter Accordion Title
5. From Style Options tab, select Div or H3 for your Accordion Title depending on header class organization on page
6. Enter Accordion Content
7. Select Add Accordion Item button to add additional accordions
8. Set Save as dropdown to Draft or Published
9. Save

See Body 1 – General Content for detailed information about the Body 1 - General Content section.