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:
Give your video widgets the same selector (i.e. .data)
Drag and drop the buttons widget and give them a unique selector (i.e. I have given them IDs: #animals, #cities, #browsers)
Now go to your individual video widgets > Advanced tab > Enable visibility > Keep HTML to Yes
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"
For the Hide other elements, you can use the selector given to your data objects (video elements) (.data in our case)
Events
There are several events to choose from:
Click: triggers the event by clicking/tapping the element that triggers the event
Mouseover: triggers the event by hovering on the element that triggers the event
Dbclick: triggers the event by double-clicking on the element that triggers the event
Touchstart: triggers the event by tapping anywhere on the phone screen
Touchmove: starts the event by holding your finger on the element that triggers the event and simultaneously scrolling.
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.
