Accordions are useful for putting extra detail into small areas so that users can choose if they want to read further. Accordions allow editors to pack a lot of information into a page, without it being too long or creating sub-pages.

But, it’s tempting to use accordions just to keep a page small, or reduce the number of pages This can actually make it more difficult for our users to get to important content. Hiding important content in accordions means that users:

• Can’t skim a page for the information that’s important to them
• Need to understand the content based only on the title
• Need an extra click to see the information inside the accordion

Accordion do’s

• Do consider using normal text instead. Use clear headings, bullet points, or numbered lists
• Do include an introduction at the top of the page
• Do use accordions for secondary information e.g. FAQs
• Do test accordion titles with people who aren’t familiar with the content inside of the accordions

Accordion don’ts

• Don't put the most important information in accordions 
• Don’t put all of the page’s content inside accordions
• Don’t use accordions to just to make a page seem shorter
• Don’t use an accordion to hide small pieces of text

How to add accordions to a web page

Find out how to build Accordions in Site Manager

Further information about accordions

Read these articles about the usability of Accordions on Mobile, and find out why Accordions are Not Always the Answer for Complex Content on Desktops