Share Your E-Learning Accordion Interactions (2019) #227

Accordion Interactions in E-Learning #227: Challenge | Recap

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.

Animated Accordion Interaction

View the project | Download the template

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.

View on YouTube

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 toggling over to this week’s challenge, take some time to check out the interactive timelines your fellow community members shared over the past week:

Zooming and Magnifying Techniques #226

Zooming and Magnifying Techniques #226: Challenge | Recap

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.

101 Comments
Montse
Lori Carlson
Lori Carlson
Dianne  Hope
Brian PVigna
Scrum Alliance
Dianne  Hope

Hi Karyn I see you're a fellow Melburnian!! Welcome to this amazing community and well done on your accordion interaction entry. I joined this community more than 5 years ago and have learnt a lot from other community members here as well by entering challenges and asking for feedback and help - so you're definitely on the right track. Most members are very helpful and kind, I've found! I can give you a couple of specific tips that might help you with this entry design: 1. It's probably a good idea to start with an overview screen that explains what your subject matter is and how users should interact with your design (although I do get a bit bored with having to spell out that users should click on the tabs!!) - so this would mean not having any of the tab content showing ... Expand

Karyn Jones
Lisa Harmer
Jeffrey Riley
Renan Cury
Amy Lamb