Docs / Ele Conditions / Actions reference
Actions reference
Actions define what happens when a trigger fires. Every action can target the element itself or any other element on the page via CSS selector.
Available actions
| Action | Effect | Requires |
|---|---|---|
| Show | Makes the target visible (removes display:none and visibility:hidden) | — |
| Hide | Hides the target (display:none) | — |
| Toggle | Alternates between visible and hidden on each trigger fire | — |
| Add Class | Adds a CSS class to the target | CSS Class field |
| Remove Class | Removes a CSS class from the target | CSS Class field |
| Toggle Class | Alternates adding/removing a CSS class on each trigger fire | CSS Class field |
| Scroll To | Smoothly scrolls the page to bring the target into view | — |
| Focus | Moves keyboard focus to the target (useful for form fields) | — |
| Close Others in Group | Hides all elements sharing the same CSS class, except the one that triggered the action | Group CSS Class field |
Target (CSS selector)
By default, all actions apply to the element the trigger is attached to. Enter a CSS selector in the Target field to affect a different element.
| Target value | Affects |
|---|---|
| (empty) | The element the trigger is attached to |
#my-modal | The element with id="my-modal" |
.popup-overlay | The first element with class popup-overlay |
Find the CSS ID or class of any Elementor element in its Advanced tab under CSS ID and CSS Classes.
Building accordions with "Close Others in Group"
The Close Others in Group action is designed for accordion-style components where only one item should be open at a time.
- Give all accordion items the same CSS class (e.g.
my-accordion) - On each item, add a trigger:
click → Close Others in Group - Set Group CSS Class to
my-accordion
When a visitor clicks any item, all other items in the group are hidden. Combine with click → Toggle on a second trigger row to also expand the clicked item.