In order to use these triggers, you have to activate "Keep HTML" in Base Settings.

Use Cases:

  • Change/Toggle the Main Content view with animation(optional) based on Link(button) Click, Mouse Hover, or Double click

How to Use:

You first need to give a selector to your main content elements and then integrate each element with its trigger to perform the event when the trigger is clicked or hovered.

For example, If you want to toggle between video widgets with the click of the button you can do the below:

  1. Give your video widgets the same selector (i.e. .data)

  2. Drag and drop the buttons widget and give them a unique selector (i.e. I have given them IDs: #animals, #cities, #browsers)

  3. Now go to your individual video widgets > Advanced tab > Enable visibility > Keep HTML to Yes

  4. In the Event Tab, set the respective trigger for the data element. For example, for the Animals video data element set #animals in "Triggers on this element"

  5. For the Hide other elements, you can use the selector given to your data objects (video elements) (.data in our case)

On Click

Elements will be shown or hidden with one click on an external element (like a Button or Image) defined by a jQuery selector (ID or Class).

NOTE: if you set CSS ID on the entire widget (through Elementor Advanced Tab), it is then better to set

#my_button a

as the activator.

When it appears, you can decide to hide some other element.

On Load

You can optionally set the event to occur on the page load with a delay time you need and the animation.

Did this answer your question?