Accordion Content

An accordion is a design snippet that compresses content within a collapsible drop-down window. Because accordions hide page content they must be carefully considered before using.

What Works

Accordions can work well for FAQs.
Keep content short. Long passages of text hidden inside an accordion can frustrate users.
Make sure the relationship between the title and the hidden content is clear.

What Doesn’t

Don’t add tables inside accordions.
Don’t add pictures inside accordions.
Don’t link to other FAQ pages from inside your accordion.
Don’t use accordions to list steps in a process. Present the steps of the process on the page to make it easy to read.

Frequently Asked Questions about Accordions

Should I list my questions in an ordered list?

Listing questions in a numbered list, while optional, can be an effective way to organize an FAQ page.

How can I differentiate between questions?

In addition to using numbers you can bold the questions and have answers in standard paragraph style.

How long should I make the FAQ answers?

Make your answers as brief as possible to help users scan the page and find answers quickly.

My FAQ answer requires a lot of explanation. Is that OK?

If your answer is complex enough to require several paragraphs, it’s possible that your question may not be appropriate to include in an accordion.