Accordion Snippet
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.
This is a DIY snippet. You can add it to your pages without assistance from Digital Strategy. Make sure to follow all standards outlined in this guide.
This snippet should only be used in the Main Content Region.
Accordions allow you to add text content within an expandable drop-down window. Listed below are examples of good use-cases for using an accordion.
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
- ¶Ù´Ç²Ô’t add tables inside accordions.
- ¶Ù´Ç²Ô’t add pictures inside accordions.
- ¶Ù´Ç²Ô’t link to other FAQ pages from inside your accordion.
- ¶Ù´Ç²Ô’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.