❌ Accordions

This page has some missing videos

Accordions

Accordions should be avoided when your audience needs most or all of the content on the page to answer their questions.

When to use an accordion

Only use an accordion if there’s evidence it’s helpful for users to:

• see an overview of multiple, related sections of content
• show and hide those sections as needed

This accordion about types of childcare looks like it might be a good fit.

But if I want to compare the different types, that is more difficult. It's also complicated to use because the heading of the section disappears.

If it was me, I wouldn't use an accordion here. I'd use Dawn to cut down the number of words.

This accordion works better as the heading stays in view. And you might not be comparing the content so much in this case.

When not to use accordions

Accordions hide content from users and not everyone will notice them or understand how they work. Please do not use an accordion for content which is essential to all users.

Test your content without an accordion first. Consider if it’s better to:

• simplify and reduce the amount of content
• split the content across multiple pages
• keep the content on a single page, separated by headings
• use a list of links to let users navigate quickly to specific sections of content

Do not use the accordion component if the amount of content it would need to contain will make the page slow to load.

Accordions work best for simple content and links. Do not use accordions to split up a series of questions into sections. Use separate pages instead.

📝  If you have used accordions in your Local Offer think about whether there is a better way to show the information. Share your thoughts in the discussion.