Button turning on/off visibility of elements?

It's been awhile since I've used Hype 3.0. I thought I could create a button that would turn the visibility of elements on or off, but I can't seem to find that option. It was actually easier to do this in Keynote....

Hey Stephen,

There's many ways to do this, but here's one way:

The first thing we'll do is choose a timeline where we are animating the 'showing / hiding' of the element. For this example, I'm using the Main Timeline. Because this plays automatically when shown, I'll add a 'Pause Timeline' action at the beginning.

Next, you'll animate the showing / hiding of your element so that it hides when the timeline continues (after 0 seconds). It can happen immediately, or fade out. If you want it to be immediate, you can use Display:Hidden in the Element Inspector the property you choose to animate.

Next, have your 'show/hide' button 'Continue' that timeline.

Screen Shot 2021-10-08 at 11.46.07 AM

Because I have 'Can restart timeline' checked, this will restart the timeline if the timeline playhead is at the end, which resets the element to 'Visible'.

The only animation I have setup for my hidden/shown element is a 'Display: Hidden' keyframe, but I could have just as easily animated 'Opacity' from 100% to 0%. Here's a demo:

hide-show.zip (27.9 KB)

In the second scene, I also added an 'Inner HTML' keyframe so the button text changes from Show to 'Hide' based on the state.