Using Accordions to Chunk Information and Reduce Cognitive Load in E-Learning #350

Using Accordion Interactions in E-Learning #350: Challenge | Recap

Accordion interactions let course designers chunk long content into shorter pieces that learners then click to explore. Using accordion interactions, you can comfortably fit lots of information onto a single slide—without overwhelming your learners. Accordions, like tabs interactions, can be used for content, navigation, FAQs, quizzing, and much more. 

Animated Accordions

Another meta example from Jonathan. In this example, an accordion interaction steps learners through the history of accordion instruments. I like the use of motion paths to animate the opening and closing of each panel. It’s more work, but the effect is worth the extra time. You can learn how to animate accordions in this training webinar.

Animated Accordion

View the example

Simple Accordion Interaction

Here’s a lo-fi example of an accordion interaction using text buttons and minimalist icons. While this is a barebones example, it can easily be added to an existing course theme design and work with little customization.

Simple Accordion Interaction

View the example

Using Accordions to Reduce On-Slide Clutter

Here’s a good example of how accordion interactions can reduce clutter and group frequently asked questions. I like the way Amoreena used the accordion as a component rather than the main interaction.

Using Accordions to Reduce On-Slide Clutter

View the example

Challenge of the Week

This week, your challenge is to share an example that demonstrates how accordion interactions can be used in e-learning.

New Entries Only!

We hosted the first accordion challenge three years ago and a second accordion challenge two years ago. To keep things fresh, we’re asking that you share only new examples this week. Of course, you’re more than welcome to re-work a previous example.

Accordions with Conditional Next Button

Here's how you can disable the next button in Storyline 360 until learners click all accordion tabs in Articulate Storyline 360.

View the tutorial on YouTube

Share Your E-Learning Work

  • Comments: Use the comments section below to share a link to your published example and blog post.
  • Forums: Start  your own thread and share a link to your published example..
  • Personal blog:  If you have a blog, please consider writing about your challenges. We’ll link back to your posts so the great work you’re sharing gets even more exposure.
  • Social Media: If you share your demos on Twitter or LinkedIn, try using #ELHChallenge so your tweeps can track your e-learning coolness.

Last Week’s Challenge:

To help you tune your accordion this week, take some time to check out the click-and-reveal interactions your fellow challengers shared over the past week:

12 Creative Ways to Use Click-and-Reveal Interactions in E-Learning #349

Click-and-Reveal Examples RECAP #349: Challenge | Recap

New to the E-Learning Challenges?

The weekly e-learning challenges are ongoing opportunities to learn, share, and build your e-learning portfolios. You can jump into any or all of the previous challenges anytime you want. I’ll update the recap posts to include your demos.

Learn to Build Accordions

Want to learn how to build accordion interactions? I’m hosting a one-hour webinar later this month. Look for many of the examples shared in this week’s challenge to be featured.

Register for the webinar

55 Comments
Jodi Sansone

Where is the Missing Food? Accordion Demo: https://jodisdemos.s3.amazonaws.com/350+Accordion/story.html Original Demo: https://jodisdemos.s3.amazonaws.com/350+Alternate+Demo/story.html McKinsey Link: https://www.mckinsey.com/featured-insights/coronavirus-leading-through-the-crisis/charting-the-path-to-the-next-normal/less-waste-fuller-plates Last week I saw this interesting infographic in my McKinsey & Co newsletter on the global food supply and how much food gets wasted at each step. McKinsey is really good at visualizing data, so I made it an interaction last weekend. I couldn't find art to replicate their infographic so I changed it up a little. Today I turned the original demo into an accordion--you can see all three together. The first file I ever downloaded and tore apart... Expand

Alicia de Billy
Troy Dunton
Jonathan Hill
Thierry EMMANUEL
Susan Schleef
Fabian Koeninger