Using Tabs Interactions in E-Learning #448 (2024)

Using Tabs Interactions in E-Learning #448: Challenge | Recap

Tabs interactions are one of the most popular interactions in e-learning. They’re super flexible and come in all shapes, sizes, and designs. The reason tabs are so popular is that they let your learners explore groups of content without having to leave the current slide. No need to jump around between different slides or scenes.

Tabs Interactions

2022 tabs examples | 2023 tabs examples

And for course designers new to e-learning or just getting started with Articulate Storyline 360, tabs interactions are a fantastic way to learn Storyline’s core building blocks: slides, states, layers, and triggers.

We use tabs-style activities all the time to teach Storyline in our workshops, webinars, and tutorials. And tabs interactions are what this week’s challenge is all about!

🏆 Challenge of the Week

This week, your challenge is to share an example that shows how tabs interactions can help organize and group related content in e-learning.

New users

Keep it simple if you're new to Storyline—don't worry about fancy visuals or conditional interactivity for now. Instead, focus on inserting objects, adding button states, shape tools, formatting, and alignment. It's all about understanding Storyline's building blocks: states, layers, triggers, and slides.

Experienced users

For the seasoned pros, try kicking it up a notch. Try using conditions to trigger actions when your learners click all the tabs. Experiment with conditional events on each slide layer. Create animated tabs using the new emphasis animations.

Share Your Project Files!

It’s no secret community members love freebies! It’s also no secret that the challenges are one of the most visible ways course designers get their work in front of the community. If you’re up for it, please consider including a download along with your example this week.

🧰 Resources

If you're looking for more information on how to use and build tabs interactions, we've got you covered. Below you’ll find articles, downloads, and past challenges that'll help you get started.


E-Learning Challenges

Creating Tabs Interactions in E-Learning #401: Challenge | Recap


✨ Share Your E-Learning Work

  • Comments: Use the comments section below to link your published example and blog post.
  • Forums: Start a new 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 to your posts so your great work gets even more exposure.
  • Social media: If you share your demos on x or LinkedIn, try using #ElearningChallenge so your peeps can follow your e-learning coolness.

🙌 Last Week’s Challenge:

Before you get started on this week’s tabs interaction, check out the creative examples from last week’s spotlight masking challenge:

17 Examples of Interactive Spotlights & Draggable Masks in E-Learning #447

Draggable Spotlights in E-Learning RECAP #447: 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

  • Challenge #449 (02.09): Emphasis animations. You've been asking for this, and now it's here! Show us how you're pulsing, shaking, teetering your slide objects to life.
  • Challenge #450 (02.16): Using Themes, Templates, & Slide Masters. Another basics challenge, only this week we're looking at under-the-hood features to help us work faster in Storyline 360 and PowerPoint. Rise 360 users can show their before-after examples using themes and block templates.

Got an idea for a challenge? Are you interested in doing a webinar showcasing how you made one or more challenge demos? Or do you have some comments for your humble challenge host? Use this anonymous form to share your feedback:

Melissa McDaniel
Nick Russell
Adam Zamczyk

This week, I've taken on a challenge centred around tab interaction, and I'm excited to share my example with you: The core of this short demo is to present seamless tab interaction featuring elegant and smooth animations when selecting from three tabs. Here, I use the default Storyline animations. I'm still on a long journey to learn JavaScript and explore diverse custom techniques to elevate the user experience. I've incorporated a variety of animations and custom zoom effects activated by JavaScript triggers. First Tab: Here, you'll find a single flip card animation that comes alive with a zoom effect as you hover your mouse over the cards. Second Tab: This section lets you see a dynamic zoom image effect triggered by mouse hover. This custom J... Expand

Adam Zamczyk
Thaddaeus Smith
David Anderson
Paul Alders