USE CASE

Elementor Sections

Show/Hide Elementor sections using Interactor

Interactor gives us multiple ways to show and hide entire sections at the click of a button.

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.

Interactor
Play Video

Interactor – Overview

Got A Question ?

We Are Here to Help
More Cases
Forms Extensions + Fluid Logic
Use Cases

Elementor Forms + Gloo

  • Fluid Logic
More options for your Elementor forms thanks to forms extensions and fluid logic, together.
Forms Extensions
Interactor Dom Manipulation Use Case
Use Cases

DOM manipulation

  • Interactor Engine
Accessible frontend DOM manipulation set up from the Elementor Editor thanks to interactor.
Interactor
interactor - replacing sections use case
Interactor Use Cases

Replacing Sections

  • Interactor Engine
Replace sections with other sections entirely using the Interactor engine.
Interactor
Dynamify Repeaters + Fluid Logic
Use Cases

Repeaters for Elementor

  • Dynamify Repeaters
Feed widgets dynamic information from backend repeaters and then show or hide them according to the number of items thanks to Dynamify and Fluid Logic.
Fluid Dynamic
Fluid Logic for form fields - use case
Use Cases

Elementor Forms + Fluid Logic

  • Fluid Logic
Dynamic conditions and visibility for form fields and for widgets according to form values.
Fluid Dynamic