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.
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.
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.
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.
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.
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:
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.