Using Accordion Interactions in E-Learning #403: Challenge | Recap
Challenge of the Week
This week, your challenge is to share an example that shows how accordion interactions can be used to group and organize content in e-learning.
Can I see some examples of accordion interactions?
Sure you can. We've hosted three accordion challenges over the past 10 years and the results are always amazing. Here are some recent challenges, recaps, and community roundups to help you get started.
- Using Accordion Interactions in E-Learning #350: Challenge | Recap
- Accordion Interactions in E-Learning #227: Challenge | Recap
- 4 Accordion Examples to Inspire Your Next E-Learning Project
- Make E-Learning That Sings with these 6 Accordion Interaction Downloads
- 9 Accordion Interaction Downloads for Arranging Courses Awesomely
Basic Accordion
This accordion from Montse is a good one to build when you’re first getting started with Storyline. The expanding panels are manually repositioned on slide layers to reveal each panel’s content.
Semi-Animated Accordions
In this example from Jonathan, motion paths are used to open and close the accordion’s panels. I like this example because it’s an excellent way to simulate advanced accordions without using variables. In addition, because there aren’t multiple panels, there’s no need for variables and multiple motion paths to track each panel’s position.
Animated Accordion
In this accordion example, multiple motion paths combined with variables are used to expand and contract each panel. You can download the source file and view a video tutorial to learn more about the project and how it was built.
View the example | Download the source | Learn how it was built
More Examples of Accordion Interactions
- Using Accordion Interactions in E-Learning #350: Challenge | Recap
- Accordion Interactions in E-Learning #227: Challenge | Recap
- 4 Accordion Examples to Inspire Your Next E-Learning Project
- Make E-Learning That Sings with these 6 Accordion Interaction Downloads
- 9 Accordion Interaction Downloads for Arranging Courses Awesomely
Require Learners to Click All Panels Before Continuing
Functionally, accordions are similar to tabs in how they group and chunk related content. But unlike tabs interactions, accordions expand, collapse, and move around the slide. This requires designers to duplicate interactive objects across multiple layers. The good news is if you know how to do it with tabs, you can do it with accordions. Let me show you how it works.
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 ensure your challenge demo goes "accordion" to plan, check out the creative ways course designers use subtle patterns and textures in e-learning:
Patterns and Textures in E-Learning RECAP #402: 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 more about the challenges in this Q&A post and why and how to participate in this helpful article.
Next Week’s Challenge
I'm hosting a how-to webinar next week on building accordion interactions in Storyline 360. I'll reference this week's challenge in the session and share any examples you've shared before the session.
- Next week's challenge (2/10/23): Creating E-Learning Interactions Inspired by Google Doodles << Thanks to Tom and Elizabeth for the idea!
- Upcoming how-to webinar (2/7/23): How To: Build Accordion Interactions in Storyline 360
It’s been a while since I’ve done the accordion webinar, so your latest accordion examples will help the session feel fresh and current.
