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

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

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

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

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.