Using Accordion Interactions in E-Learning (2023) #403

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.

What are accordion interactions?

Accordions are similar to tabs interactions. They’re both commonly used to present large blocks of content into shorter pieces that learners then click to explore. But there are some key differences.

Tabs interactions consist of buttons (tabs) that remain in a specific location on the slide, while accordions use expandable panels that open and close to reveal content. 

Generally, tabs are easier to build because the navigation buttons and content don’t change for each button. On the other hand, accordions are the next-level interaction and require more planning to accommodate the changing panel positions and content placement. 

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

 Are these interactions difficult to build in Storyline 360?

Like most things in Storyline, there are multiple ways to build the same interaction. If you're new or just getting started, you can use Storyline's core building blocks (states, layers, and triggers) to build click-and-reveal accordions. Intermediate and advanced users can take advantage of variables and motion paths to animate the panels.

Regardless of your skill level, we want you to be successful in this week's challenge. If you get stuck or have questions, please let us know in the forums.

To give you an idea of the three common ways to build accordions, check out the following examples.

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.

View the example | Download

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.

View the example

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.

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