Why Accordions?
An Accordion is a vertical menu with a stack of headers that you can click to reveal additional information. It’s a popular tool in digital learning design for organizing content into logical sections and making it easier for learners to process.
Accordions are popular with learning designers because:
- They look good!
- They add some visual variety to a page that might otherwise lull a learner to sleep
- They help organize content on pages to keep them shorter
- The group information into distinct areas with clear themes
- They give learners an action to complete (clicking) other than just scrolling through text on a page
Just because you can use an Accordion doesn’t mean you always should. Learning Experience Designers sometimes get so excited about Accordions that they begin to overuse them and put them in places where they don’t belong. When using Accordions, make sure you’re using them for the right reasons!
When Should You Use an Accordion?
When considering an Accordion, ask yourself: “Does this Accordion enhance the natural flow of learning, or does it disrupt it?”
Accordions look great so it can be tempting to use them everywhere, but resist the urge to use them just because you like how they look. Always filter your design through the lens of the learner’s experience.
In User Experience design, we sometimes focus on minimizing the number of times a learner has to click to access information. But rather than arbitrarily counting the number of clicks, focus on how a learner will react to what you’re asking them to do.
A badly-designed Accordion will make learners wonder “why did I have to click to see that?” or “why am I clicking so much? This is pointless.” Any time a learner starts to think about the user experience instead of the actual course content, you’ve lost their attention and broken their trust in the course.
An example of a badly-designed Accordion. Why make learners click to read this sentence when you can just put the information directly on the page?
On the other hand, a well-designed Accordion will feel natural. The learner won’t think twice about the fact that they’re clicking at all. They’ll simply want to see the information and it will make sense that it’s organized into sections within an Accordion. 
This FAQ-Style Accordion is well-designed because it feels natural. You can click on the questions that interest you and skip the others.
Accordion Pitfalls to Avoid:
- If each section in an Accordion is only going to contain a sentence or two, don’t use it. There’s no reason to make learners click and reveal a sentence when you can just include it on the page.
- If each Accordion is going to contain a large volume of content, just make each topic into a separate lesson page instead.
- Be thoughtful when including more than one Accordion on a page. Before you do it, ask yourself: do the extra Accordions enhance the flow of learning, or do they just disrupt it?
- If you’re going to include a video inside of an Accordion, you won’t be able to track learner data about the video, so plan accordingly!
Great Uses for Accordions:
- To explain a list of key terms or concepts
- To expand on different labels in a chart
- To organize a calendar and agenda, a list of activities, or a sequence of steps in a process
- To present optional information to learners that they can opt into reviewing, such as extra examples of concepts, additional resources, video transcript files, or Frequently Asked Questions
- To chunk a complicated topic into smaller, more digestible sections
Design Tips for Delightful Accordions
Once you’ve considered how it fits into the flow of learning, you’re free to get creative and design beautiful Accordions that make your course look great!