An accordion is a vertically stacked list of links that can be clicked to reveal or hide content associated with them. They can be used to consolidate long pages however there are usability shortcomings that should be considered:
- Accordions force people to click on links one at a time to display the page's content. This can be cumbersome especially if there are many topics on the list that individuals care about. If people need to open the majority of subtopics to have their questions answered or to get the full story then an accordion is not the way to go. In this situation, it’s better to expose all the content at once.
- Hiding content behind links diminishes people’s awareness of it. An extra step is required to see the information. Accordion links must be descriptive enough to motivate people to click on them.
- Accordions should be avoided when your audience needs most or all of the content on the page to answer their questions.
- Accordions are more suitable when people need only a few key pieces of content on a single page. By hiding most of the content, users can spend their time more efficiently focused on the few topics that matter.
Here is an example of content structured using accordions:
How to create Accordions:
Implementing accordions within a page is fairly straightforward, but it does require some HTML coding.
- In the body area, switch to source view
- Wrap your elements in the following two classes: "accordion" and "accordion_content"
<div class="accordion">Some clickable title goes here
</div>The content I want shown when it expands goes here