Gloo’s Interactor engine lets you use JS triggers and events to hide and show Elementor sections with animations or CSS interactions.
Sometimes all you need to do is hide or show certain elements within a page according to user interaction with the page itself. This is not always straightforward when we’re working with Elementor sections, but Interactor allows you to do it so easily that there’s actually many ways to implement just that.
Let’s take a look.
In this Short Showcase, we want the showing or hiding of the section to happen once the user clicks a button. But don’t let this limit your imagination: there’s a multitude of firing events you can choose to pair to showing or hiding sections!
What you will need:
- A button
- Elements within a different section (in this case we’ve used pricing boxes)
With the design out of the way, make sure both the button and the section with the content you want to show and/or hide have an unique ID, we will need this later to connect it. We’ve also went and given the section a custom CSS class of “hidden” setting it up as “display:none“. This class will hide the section when active. Since we want the section to be hidden by default, let’s go in the advanced menu in the advanced tab and paste “hidden” in the CSS class field.
Interactor work
Let’s set our trigger: this will let Interactor know that someone has clicked the button. For this, all we need is to set the firing event as Click, and to target the button by pasting its ID in the target field. remember to use the # symbol before the ID! That’s all when it comes to the trigger.
Let’s build the event. First we’ve showcased a simpler animation event that doesn’t even need CSS classes to work: We’ve set the event to be an animation called Fade toggle, and targeted the
section using its unique ID. Let’s connect it to the trigger and that’s it. Once refreshed, you will see that this already has the desired effect, and with a fancy fade animation to boot! Great, but that’s just one way to do it.
But as we said before there’s other ways to do it. We can use other animations like Toggle show/hide, but if we want to use CSS classes then let’s change the event from animation to interaction and select Toggle Class. What this will do is toggle the CSS class once the connected firing event is fired. In this case the parameter to toggle is “hidden“, which is the class we’ve created before for the section . It will add or remove that class depending on its current status.
We can then use the inspection tool of your browser to verify that this is working as intended, because once the section is selected we can then actually see for ourselves that clicking the button adds and removes the class. This can of course be used to toggle any kind of CSS class you can imagine, and not just simple ones like these! truly a game-changer.
