Using Tabs Interactions in E-Learning (2020) #272

Tabs Interactions in E-Learning #272: Challenge | Recap

Tabs interactions are one of the most common interactions in e-learning. They’re super flexible and come in all shapes, sizes, and designs. 

Tabs Interactions in E-Learning

For e-learning designers, tabs make it easy to break down and group related content into smaller, more meaningful sections. Using tabs to reveal each section helps learners remain focused in the moment without jumping out to new slides or scenes. 

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 a fresh example that demonstrates how tabs interactions can group related content into meaningful sections in e-learning courses.

Basic Tabs

If you’re just getting started with Storyline, try to focus on the alignment and positioning of slide objects before adding the interactivity with triggers and layers. Work with the shape tools, formatting options, and alignment tools. Don’t worry about making your tabs  look good. Instead, focus on Storyline’s workflow of adding states, layers, and triggers.

Advanced Tabs

For those of you with Storyline experience, try working with conditions to make something happen after a specified number of tabs were clicked. Can you reveal a hidden or disabled button after all tabs are visited? Can you make something happen when the timeline of a slide layer reaches a cue point or the end? What can you do with the layer properties options to affect how the tabs interaction functions?

New Entries Only!

We hosted the first tabs challenge seven years ago. Since then, hundreds of tabs-style examples and downloads have been shared. Because tabs are so common, we’re asking that you only share new examples in this week’s challenge. 

Share Your Source 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.

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.
  • Twitter: If you share your demos on LinkedIn or Twitter, try using #ELHChallenge so your tweeps can track your e-learning coolness.

Last Week’s Challenge:

Before you tab through this week’s challenge, check out the fantastic collection of true/false variable examples your fellow challengers shared over the past week:

True/False Variables in E-Learning #271:

True/False Variables in E-Learning #271: Challenge | Recap

Wishing you a tabs-tastic 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.


Jodi Sansone
Jonathan Hill
Carrie Gauthier
Bernie Tremblay
David Anderson
Bernie Tremblay

Hi David Anderson, thanks for the great idea on how to attach my SL file - I have gone ahead and done that. With the layers, the issue I had is they were not maintaining the intended depth order. I sought to have the human systems go Skeletal, Nervous, Respiratory, Circulatory, Digestive and then Muscular on top. This works with using states - the systems are always in the correct order so if you select them all Muscular is on top. However, when I used layers, the system that was on top was always the last one selected. I attached my SL file to the Resources tab to download and look. You can also find my attempt using Layers instead of States by clicking Next and viewing it on the 2nd slide in my Review 360 link. Thanks for any help! Edit: My colleague just sent this old commu... Expand

David Anderson
Bernie Tremblay
David Anderson
Tracy Carroll
Rema Merrick
Paola Rattu