The Add Class property adds the class specified by a Class Name.
Add
Select a block
Open the Block Inspector
Navigate to the Primary tab
Navigate to General Settings
Click the Interactions property to open the Interactions Modal
Choose Trigger
Click ➕ to add an Interaction
Select desired target (Current, Selector)
If Selector, input required selector
Click ✎ (Edit) to open Interactions Modal)
Find Add Class in dropdown
Input Name
Remove
Select a block
Open the Block Inspector
Navigate to the Primary tab
Navigate to General Settings
Click the Interactions property to open the Interactions Modal
Choose Trigger
Click ➕ to add an Interaction
Select desired target (Current, Selector)
If Selector, input required selector
Click ✎ (Edit) to open Interactions Modal)
Find Name
Click 🗑 (trash) to remove
Remove Class
The Remove Class property removes the class specified by a Class Name.
Remove
Select a block
Open the Block Inspector
Navigate to the Primary tab
Navigate to General Settings
Click the Interactions property to open the Interactions Modal
Choose Trigger
Click ➕ to add an Interaction
Select desired target (Current, Selector)
If Selector, input required selector
Click ✎ (Edit) to open Interactions Modal)
Find Remove Class in dropdown
Input Name
Toggle Class
The Toggle Class property adds/removes a given class depending on the current state of the target.
Add/Remove
Select a block
Open the Block Inspector
Navigate to the Primary tab
Navigate to General Settings
Click the Interactions property to open the Interactions Modal
Choose Trigger
Click ➕ to add an Interaction
Select desired target (Current, Selector)
If Selector, input required selector
Click ✎ (Edit) to open Interactions Modal)
Find Toggle Class in dropdown
Input Name
Click 🗑 (trash) to remove
Toggle Slide
The Toggle Slide property adds the necessary CSS properties to smoothly bring the height of an element to 0 or to its auto height depending on the current state (open or closed) of the element.
Add/Remove
Select a block
Open the Block Inspector
Navigate to the Primary tab
Navigate to General Settings
Click the Interactions property to open the Interactions Modal
Choose Trigger
Click ➕ to add an Interaction
Select desired target (Current, Selector)
If Selector, input required selector
Click ✎ (Edit) to open Interactions Modal)
Select Toggle Slide in dropdown
Click 🗑 (trash) to remove
Slide Up
The Slide Up property adds the necessary CSS properties to smoothly bring the height of an element to 0.
Add/Remove
Select a block
Open the Block Inspector
Navigate to the Primary tab
Navigate to General Settings
Click the Interactions property to open the Interactions Modal
Choose Trigger
Click ➕ to add an Interaction
Select desired target (Current, Selector)
If Selector, input required selector
Click ✎ (Edit) to open Interactions Modal)
Select Slide Up in dropdown
Click 🗑 (trash) to remove
Slide Down
The Slide Down property adds the necessary CSS properties to smoothly bring the height of an element to its auto height.
Add/Remove
Select a block
Open the Block Inspector
Navigate to the Primary tab
Navigate to General Settings
Click the Interactions property to open the Interactions Modal
Choose Trigger
Click ➕ to add an Interaction
Select desired target (Current, Selector)
If Selector, input required selector
Click ✎ (Edit) to open Interactions Modal)
Select Slide Down in dropdown
Click 🗑 (trash) to remove
Property
The Property property adds a specified property and its value to the target.
Add/Remove
Select a block
Open the Block Inspector
Navigate to the Primary tab
Navigate to General Settings
Click the Interactions property to open the Interactions Modal
Choose Trigger
Click ➕ to add an Interaction
Select desired target (Current, Selector)
If Selector, input required selector
Click ✎ (Edit) to open Interactions Modal)
Select Property in dropdown
Input CSS Property
Input Value
Click 🗑 (trash) to remove
Toggle Display
The Toggle Display property adds the necessary CSS properties to either show or hide the target depending on its current state.
Add/Remove
Select a block
Open the Block Inspector
Navigate to the Primary tab
Navigate to General Settings
Click the Interactions property to open the Interactions Modal
Choose Trigger
Click ➕ to add an Interaction
Select desired target (Current, Selector)
If Selector, input required selector
Click ✎ (Edit) to open Interactions Modal)
Select Toggle Display in dropdown
Click 🗑 (trash) to remove
Toggle Display Smooth
The Toggle Display Smooth property adds the necessary CSS properties to either show or hide with a fade in the target depending on its current state.
Add/Remove
Select a block
Open the Block Inspector
Navigate to the Primary tab
Navigate to General Settings
Click the Interactions property to open the Interactions Modal
Choose Trigger
Click ➕ to add an Interaction
Select desired target (Current, Selector)
If Selector, input required selector
Click ✎ (Edit) to open Interactions Modal)
Select Toggle Display Smooth in dropdown
Click 🗑 (trash) to remove
Custom Function
The Custom Function property allows you to add custom functions that take priority over built-in functions.
Add/Remove
Select a block
Open the Block Inspector
Navigate to the Primary tab
Navigate to General Settings
Click the Interactions property to open the Interactions Modal
Choose Trigger
Click ➕ to add an Interaction
Select desired target (Current, Selector)
If Selector, input required selector
Click ✎ (Edit) to open Interactions Modal)
Select Custom Function in dropdown
Add required function (CSS)
Click 🗑 (trash) to remove
Target
The Target property allows you to choose the target on which you want the action applied such as: Current, Selector, Includes, Parent, With Attribute, With Attribute Value.
You can specify one or multiple targets for every action
Add/Remove
Select a block
Open the Block Inspector
Navigate to the Primary tab
Navigate to General Settings
Click the Interactions property to open the Interactions Modal
Choose Trigger
Click ➕ to add an Interaction
Select desired target (Current, Selector)
If Selector, input required selector
Click ✎ (Edit) to open Interactions Modal)
Add required Class
Find Target
Select required target (Current, Selector, Includes, Parent, With Attribute, With Attribute Value)
Click ⌫ to remove
Conditions
You can specify one or multiple conditions for every action
The Conditions property allows you to choose specific conditions related to the target that will give more scope and control on which elements are selected.
Conditions
Not Current The target is not the current clicked element.
Current Child The target is the child of the current clicked element.
Not Current Child The target is not the child of the current clicked element.
Includes The target includes the specified class (input without dot).
Doesn't Include The target does not include the specified class (input without dot).
Parent Includes The parent of the target includes the specified class (input without dot).
Parent doesn't Include The parent of the target does not include the specified parent (input without dot).
Same Parent as Current The target shares the same parent as the clicked element.
With Attribute The target has the same specified attribute (input full attribute).
Without Attribute The target does not have the same specified attribute (input full attribute).
With Attribute Value The target has the same specified attribute and the same attribute value.
Without Attribute Value The target does not have the same specified attribute or the same attribute value.
Add/Remove
Select a block
Open the Block Inspector
Navigate to the Primary tab
Navigate to General Settings
Click the Interactions property to open the Interactions Modal
Choose Trigger
Click ➕ to add an Interaction
Select desired target (Current, Selector)
If Selector, input required selector
Click ✎ (Edit) to open Interactions Modal)
Add required Class
Find Target
Select required target (Current, Selector, Includes, Parent, With Attribute, With Attribute Value)
