Accordion interactions are a great way to group a large amount of related content into single slide. Similar to tabs interactions, accordions let users explore content using vertical or horizontal layouts.
Accordions can be used to progressively reveal bullet points, quiz questions, module introductions, and summary slides. They're super flexible and they're what this week's challenge is all about!
6-Tab Animated Accordion
Here's a free template to get you started this week. Using motion paths and a variable, this template animates the opening and closing of the tab buttons.
Conditional Next Button
Accordion interactions are similar to tabs, but they introduce a level of complexity with the duplicated buttons. If you need to lock or restrict navigation until the learner visits all tabs, you'll have to approach things a little differently. Here's one way to add conditional navigation to your 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.
NOTE: Your entry can be anything from a rough concept to a polished example. The challenges are open to everyone, regardless of experience or skill level. If you need technical or creative help with your project, please ask in our forums and reference the challenge number you’re working on.
New Entries Only!
We hosted the first accordion challenge two years ago. To keep things fresh, we’re asking that you share only new examples this week. You’re more than welcome to re-work a previous example.
Last Week’s Challenge:
Before toggle over to this week’s challenge, make some time to check out the interactive timelines your fellow community members shared over the past week:
Wishing you a great week, E-Learning Heroes!
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.