Tabbed Interaction

Apr 23, 2013

I love using tabbed interactions in storyline.  As an example, this simple tabbed interaction - (

I am wondering if it is possible to do the following:

Not show the learner right from the beginning the names of the tabs (and even the number of tabs) in the interaction.  So basically let him explore the tabs one by one as the presentation moves forward.  But when he looks at the tab, that tab should now be available for him as a clickable button.

So lets assume we have 3 tabs in all.  So first he sees content for 1st tab and 1st tab is also available to him as a clickable button.  Then he sees content for 2nd tab and now second tab along with 1st tab is available to him as a clickable button.  Then he sees content for 3rd tab and now third tab along with 1st and 2nd tab is available to him as a clickable button.

no tab

1st tab

1st tab   2nd tab  

1st tab   2nd tab    3rd tab

I tried setting this up but ended up with a very convoluted templated and then today's blog post by Tom really resonated with me - templates are there to make one's job easier, not complicated.

Looking forward to your help.



13 Replies
Christine Hendrickson

Hi Payal,

You should be able to set this up with triggers and custom states for the tabs. You want the tabs to show up after the first has been selected, but you don't want to show the tab information until those following tabs have been interacted with, correct?

I put together a quick example if you'd like to take a look:

Example for Payal

Would something like that work for you?

I'm also attaching the file, just in case you want to take a look at how I set it up.

Let me know if you have any questions!


Ren Gomez

Hi Sanchit,

Happy to help! Since your tabs are on layers within the same slide, using states would be a great way to direct the Next button to become active.

Here's what I did:

  1. Added Visited states to all your tabs.
  2. Added a Next button and set the initial state to Hidden
  3. Added a trigger to change state of Next button to Normal when states of all tabs have been Visited.

I've attached my changes to your file below. Take a look and let me know if this works for you!

Ren Gomez

Hi Sanchit,

I added a Next button because it looks like you're using a transparent color scheme in the player, and I didn't see any navigation features when I previewed the course. Are you planning on using the player navigation Prev/Next buttons?

If so, I'd recommend using a different player color scheme and then:

  1. Create a trigger to set the state of the next button to hidden when the timeline starts.
  2. Adjust the trigger I created to change the state of the player next button to normal when the state of all tabs have been visited.

Hope this helps!

Ren Gomez

Hi Sanchit,

I took a look at your file and added a couple of triggers. The first one changes the state of the Next button to Disabled when the timeline starts, and the second one changes the Next button to Normal once all states of the red boxes have been Visited. 

This way, they can click the Next button on whatever layer they finish on, or they can also return to the base layer to click Next. I've also attached the edited file for you!

I wouldn't recommend forcing the learner to jump to the next slide once the third layer has been visited, as it gives them time to read the information at their pace and click Next when they're ready.

This discussion is closed. You can start a new discussion or contact Articulate Support.