This article goes over how to use the Visibility Toggle Component to show or hide any other component within a slide of your presentation. Follow the steps below to add some interactivity to your slides.
Tips + Tricks:
This is one of our more advanced Components with a steeper learning curve than any other Components. However, the tutorial video walks through the process step-by-step so technically anyone can implement it if they follow along.
Please reference the "Visibility Toggle Component" guide for any additional information or questions you might have:
How to Hide any Component
Step 1: Navigate to the Layout Mode within your slide.
Step 2: Create a component that you want to hide or show using the Visibility Toggle Component. For this example, we will be using a simple Image Component.
Adjust and update the component to your liking as shown below.
Step 3: Create a Visibility Toggle Component so that you will have two new components now on this slide.
Step 4: Navigate into the settings for the component once added to your slide.
Once opening up the settings, there are a few crucial options to fill out and use to make sure the "Hide" feature will work properly.
As a recommendation, you should add some sort of image or icon to allow you to know where to "click". This action will toggle the hide/show between the other components you are using. To do this, scroll down to the bottom where there are a few options to view your image library. You can add images to "Default Image", "Default Hover Image", "Active Image", and "Active Hover Image".
Step 5: Add a "Key" at the top of the settings option for the Visibility Toggle Component. This key should be some identifier that connects the toggle to the component that you are hiding so it is easy to remember what does what.
Tip: Make sure you save to complete the settings adjustment that you just made for the component.
Step 6: Click back into the component you are hiding (Image Component) and click the "Wrench" icon on the top right. This will bring up the properties of that component.
Step 7: Toggle on "Visibility Controls" and set the key to the same exact word you used previously in the Visibility Toggle Component settings.
Step 8: Save and navigate back into "Edit" mode now on your slide. If you click your image or whatever you set the Visibility Toggle Component to, you should now see your other component disappear and reappear when needed.
(Toggle On)
(Toggle Off)
