The Most Straightforward Way to Build a Tabs Interaction for Storyline (with Download!)

Tabs interactions, also known as click-and-reveals, are a popular type of interaction for e-learning courses. Why? They’re a great way to chunk out content that belongs in the same neighborhood topically, but if you shared all that content at once it would overwhelm your learner. Tabs are also intuitive, as learners are conditioned to click on them to see what’s there. And function aside, a big plus about tabs is that you can style them in a ton of different ways, so they can work with nearly any design.

I recently shared a simple tabs interaction with the community as a free download: Storyline 2 - Simple Tabs Template.

View demo.

There are many different ways to build a tabs interaction. To build this classic example, I leaned on some key features of Articulate Storyline, like states, button sets, and slide layers.

Style Your Slide

My first step was to decide how I wanted the interaction to look. For the top of the slide, I settled on a dark, chunky header with the title text (font: Century Gothic), and for the bottom portion of the slide, I went with a light gray background with a soft gradient effect. The background was created using two rectangle shapes. At this point, my slide looked a bit like this:

I also popped into the player properties window and adjusted the player skin to make it “invisible.” How? I removed the menu, as well as all the buttons and links from the player. (Psst … don’t forget to use the slide properties to remove the “Next” and “Prev” buttons from your slide as well!)

I also adjusted the color scheme and made the entire player solid white, allowing the player to blend with the browser background color (also white). This created the “invisible” player look I wanted. The player properties window shows a preview of how the player will look, which you can see below:

If you want a quick way to get the “invisible” player look for your own projects, grab these free downloads: 3-Pack of Seamless Player Skins and 10-Pack of Seamless Player Skins. Import the player skins into your project by following these instructions: Sharing Player and Color Schemes.

Create the Tabs

Once I had styled the background of my slide, I created the tabs using rounded same-side corner rectangle shapes. I added the tab title text directly onto the shape, then styled the tab to be black with light gray text (font: Century Gothic).

Once the tab looked right, I copied it, then pasted it four times to create my other tabs. I then used the align tool from the format tab of the ribbon to align the tabs, with an equal amount of space between each one. By now my slide looked like this:

Progress, but the tabs weren’t done yet. They each needed a few states to get their interactivity to work as it should. So I selected my first tab and, in the states panel, created two new states for the tab: “Hover” and “Selected.”

Repeat individually for each tab? No way! A nifty trick is that the format painter also copies states. So with just a few clicks, I used the format painter to add the hover and selected states to all of the other tabs in my interaction. Find out more about using the format painter, and other great shortcuts, here: Do You Know These 10 Storyline Time-Saving Shortcuts?

Create the Button Set

By including the tabs in a button set, I could ensure that only one of the tabs could be selected at a time. It’s a serious time-saver!

Here’s how I created my button set: I selected all of the tabs, then right-clicked on one of the corner anchors. From the right-click menu, I selected “Button Set,” then clicked “New Set,” and gave it a name. Now, as a button set, only one of the tabs can display the selected state at a time. Here’s an article to learn more about working with button sets: A Great Storyline Time-Saver: Button Sets.

Add the Layers

With my tabs in place and button set created, my next job was to build the slide layers. I added my first layer, which I named “Tab One,” and gave it placeholder text and an image. I used grids from the design tab of the ribbon to get everything aligned perfectly. For more about using grids in your designs, read: Use Grids to Improve Your E-Learning Designs.

Once I had my Tab One layer looking just right, I used the copy layer feature to duplicate the first layer four more times. I then updated the name of each layer, and replaced the text and image.

Initially, I wasn’t going to create a slide layer for Tab One. I wanted to strip unnecessary layers to make my project file leaner, so I figured I’d put the Tab One content directly on the base layer. However, as I was building this, I discovered it wouldn’t work that way. Why? Because there’s no way to add a trigger to Tab One to show the base layer when the tab is clicked. (A trigger can show a slide layer or hide the current layer, but it can’t show the base layer.)

Set Up the Triggers

Almost done! Remember, nothing happens without a trigger, so to make the tabs interaction live, I needed to add some triggers.

For this example, I wanted to preselect the first tab so its content was visible when the interaction started. To get this to happen, I added two slide triggers:

• The first trigger changes the state of the tab to “selected” when the timeline of the base layer starts.
• The second trigger shows the Tab One layer when the timeline of the base layer starts.

My final step was to add a trigger to each tab to show the corresponding slide layer when learners click each tab. To save time, I used the trigger copy-and-paste feature rather than recreating each trigger one at a time. Since I have five tabs in my interaction, I ended up with five more triggers.

With that, my tabs interaction was complete and fully functional. Here’s the final product:

View demo.

Remember: Button sets are the key to creating this quick and clean interaction. Before I remembered to use a button set, I was seriously overcomplicating the process for myself. The button set saved me a lot of trouble!

Do you know an even simpler or more straightforward way to build a tabs interaction? I’d love to hear from you, so leave me a comment below.

Want to try something you learned here, but don’t have Articulate software? Download a free trial, and come back to E-Learning Heroes regularly for more helpful advice on everything related to e-learning.