Changing the state of tabs or instead, using buttons?

Nov 02, 2020

Hello Community!

I'm seeking to edit this fantastic tab interaction from Sarah Hodge with additional layers.

For instance, I need the Reliability tab to be available after the Validity2 tab has been viewed.  The only way I see around this issues is to hide the tabs and work with buttons (which seems to diminish the need for tabs all together.)  Any suggestions? 

Thank you for your help (and thank you Sarah for sharing an awesome interaction file)!


10 Replies
Ned Whiteley

Hi Holly,

In the attached example, I have done away with buttons by using a scrolling panel. All the tabs are visible to the user, but they can only advance to the next one once the previous one has been viewed.

I have achieved this by using the state of the white rectangle that surrounds the scrolling panel (Rectangle 2 in each case) as the trigger point, as that will only register as Normal when it is shown for the first time.

Although the user will have the opportunity to proceed to the next layer without actually scrolling down, the very fact that there is a scrolling panel will tend to make your users view it in its entirety.

Hope this helps, but if you have any further queries, just get back to me here.

Ned Whiteley

Hi Holly,

I'm slightly confused by your latest query.

Clicking on a tab opens a layer and so, moving between layers is the same as selecting different tabs. If what you are saying is that you would like to open a tab and then branch to different layers (not necessarily the ones associated with individual tabs), this is perfectly possible, including having the ability to return to the tab that you first branched from. You can even jump from a tab to a completely new slide, move through a number of different layers on that slide and then return to the original tab, if that's what you wish to do. Storyline is extremely flexible in this regard.

If you are able to give me a better idea of what exactly you want to do, I will be able to give you some options to consider and then help you through the process if you have any further queries.

Ned Whiteley

Hi Holly,

In the attached version 2 of my original file, I have included three options for you to consider.

The first slide has three additional layers that can be accessed in order from the first tab. When the user clicks the "Next" icon on the final information layer, they are returned to the first tab.

The second slide has the same three layers, but these can be accessed by both the first and second tabs (you still have to view tab 1 before being able to view tab 2). When the tab is shown, it automatically sets a variable (CurrentTab) to 1 for tab 1 or 2 for tab 2. When the user clicks the "Next" icon on the final information layer, they are returned to tab 1 if CurrentTab is equal to 1 or tab 2 if CurrentTab is equal to 2.

The third slide accesses a lightbox slide, which includes the same three layers. When the user has finished viewing the lightbox slide, they click on the X in the top right corner , the lightbox slide closes and the user is then back on their original tab layer. This is set up for both tab 1 and tab 2.

If you have not used lightbox slides before, they are a useful way to display the same information several times during a course ( for example, a menu or glossary or general information), without having to repeat layers on several different slides. All you need to do is set up one slide and then call it up from as many other slides as you wish. The lightbox slide appears over the top of the slide you accessed it from and, when you close it, it simply disappears, leaving you on your original slide. With careful formatting, you can get some nice effects with lightbox slides, but they will always have a solid background.

Hope this helps and gives you some ideas to play with. If you have any further queries, just get back to me.

Leslie McKerchie

Hi Nancy!

I cannot speak for Ned, but your question did give me a great reason to pop in and check out his example.

The light blue color that you're seeing when hovering over the tab is under the States Tab for the item. Here is some documentation on states:

Storyline 360: Adding and Editing States

In addition, I made a quick Peek 360 video recording while I took a look at this sample and identified the item needed.

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