An accordion is a list of headers that hide or reveal additional content when selected/opened. You may see them often on FAQ pages, where it makes it easy for users to scan the list of questions without getting distracted by answers and a lot of text, and giving them control by clicking on the questions that pertain to them.

There are 3 general principles that should be considered when using accordions: reducing cognitive load, increasing readability, and clarity. Accordions are most appropriate when users will only need a few specific pieces of content within a page or if you have only a small space to display a lot of content.

While they can make a web page easier to read, accordions should be used in moderation elements to describe situations or deliver information clearly. If users need to see most or all of the information on a page, it is better to use well-formatted text instead.