Forum Discussion
Remove click to reveal when another item selected
I have searched for the last two days for tutorials, articles, discussions to try to find out how to do this. I have one slide with 4 squares on it and each displays text when selected. I've got this part down and working but I need the text to display then disappear when another item is clicked. I also want the learner to be able to click on the item more than once. I've created states, Triggers and layers and none give me exactly what I need. Unfortunately the text seems to just be showing on top of each other! Any links to instructions would be helpful!
What you're describing sounds like a basic tab interaction. There are two easy ways to program those:
- Each button shows a layer with the corresponding content.
- Each button changes the state of an object to show the corresponding content.
Both methods are demonstrated in the attached file.
Thanks Judy! It is a basic function and should be a tutorial somewhere!!
I currently have the buttons set but for some reason whichever button is selected first, that content stays there and does not change to the next. I will go back and double check my triggers to see if they match yours example.
Thanks for the fast reply!!!
FYI: This training has a "Create your first click-and-reveal interaction" segment that demos changing states with the buttons:
Getting Started with Interactivity in Storyline 360 - Articulate 360 Training
This will take you to some inspiring examples:
54 Navigation Tabs Interactions and Templates for E-Learning Designers #272 (articulate.com)
Nothing "goes away" unless there is a trigger to change its state to Hidden, to move it off the slide, or to show something else that covers it.
To make the click-and-reveal work, use one object with different states for the descriptions. Then have the buttons change the object to the appropriate state. The program can only show one state at a time, so only one description will appear at a time.
The attached file has an edited slide with that set up. FYI: For the Normal state, I used a white fill with 99% transparency. That makes it invisible to the user, but makes it easier for you to select it when editing.
For convenience, here's the link to the User Guide article about using States (which was included in the demo_tabInteractions file I posted in a previous comment): https://community.articulate.com/series/articulate-storyline-360/articles/articulate-storyline-360-user-guide-how-to-add-and-edit-states
As noted in my earlier comment, another option is to put each description as an object on a separate layer. The user can't tell the difference. It's a matter of personal preference. (For example, I prefer to use layers, because it's easy to see that they're there and to edit them without having to go into states. But some folks prefer using states to have fewer objects.)
Thanks Judy!! Appreciate the assistance. I guess I am not understanding how to get the 4 items under one state, as they are objects on the slide. Which is my confusion of where they reside and the guides shows the expression selections from a drop down....oh well!
I will save this and duplicate for future projects!
Thanks again!!
States are variations of an object. So, in the Timeline panel, the object would only take up one line. But the States panel will show all the States/variations of that object.
The link I provided above goes to the User Guide article about working with States. It includes details about how to add and edit States. The samples they use show the states for an inserted character. But the same basic instructions apply to any text box or object.
If it's still confusing, I suggest you (re)view Articulate's basic tutorials about how Storyline works. Understanding States, Layers, the Timeline, etc. helps you move beyond basic PowerPoint-like courses.
