Actions

The Interaction Modal allows you to add several actions as required.

Add

1. Select a block

2. Open the Block Inspector

3. Navigate to the Primary tab

4. Navigate to General Settings

5. Click the Interactions property to open the Interactions Modal

6. Choose Trigger

7. Click ➕ to add an Interaction

8. Select desired target (Current, Selector)

9. If Selector, input required selector

10. Click ✎ (Edit) to open Interactions Modal)

11. Select required Action in dropdown (Add Class, Remove Class, Toggle Class,Toggle Slide,Slide Up, Slide Down, Property, Toggle Display, Toggle Display Smooth, Custom Function)

12. Click ➕ to add another action

Add Class

The Add Class property adds the class specified by a Class Name.

Add

1. Select a block

2. Open the Block Inspector

3. Navigate to the Primary tab

4. Navigate to General Settings

5. Click the Interactions property to open the Interactions Modal

6. Choose Trigger

7. Click ➕ to add an Interaction

8. Select desired target (Current, Selector)

9. If Selector, input required selector

10. Click ✎ (Edit) to open Interactions Modal)

11. Find Add Class in dropdown

12. Input Name

Remove

1. Select a block

2. Open the Block Inspector

3. Navigate to the Primary tab

4. Navigate to General Settings

5. Click the Interactions property to open the Interactions Modal

6. Choose Trigger

7. Click ➕ to add an Interaction

8. Select desired target (Current, Selector)

9. If Selector, input required selector

10. Click ✎ (Edit) to open Interactions Modal)

11. Find Name

12. Click 🗑 (trash) to remove

Remove Class

The Remove Class property removes the class specified by a Class Name.

Remove

1. Select a block

2. Open the Block Inspector

3. Navigate to the Primary tab

4. Navigate to General Settings

5. Click the Interactions property to open the Interactions Modal

6. Choose Trigger

7. Click ➕ to add an Interaction

8. Select desired target (Current, Selector)

9. If Selector, input required selector

10. Click ✎ (Edit) to open Interactions Modal)

11. Find Remove Class in dropdown

12. Input Name

Toggle Class

The Toggle Class property adds/removes a given class depending on the current state of the target.

Add/Remove

1. Select a block

2. Open the Block Inspector

3. Navigate to the Primary tab

4. Navigate to General Settings

5. Click the Interactions property to open the Interactions Modal

6. Choose Trigger

7. Click ➕ to add an Interaction

8. Select desired target (Current, Selector)

9. If Selector, input required selector

10. Click ✎ (Edit) to open Interactions Modal)

11. Find Toggle Class in dropdown

12. Input Name

13. 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

1. Select a block

2. Open the Block Inspector

3. Navigate to the Primary tab

4. Navigate to General Settings

5. Click the Interactions property to open the Interactions Modal

6. Choose Trigger

7. Click ➕ to add an Interaction

8. Select desired target (Current, Selector)

9. If Selector, input required selector

10. Click ✎ (Edit) to open Interactions Modal)

11. Select Toggle Slide in dropdown

12. 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

1. Select a block

2. Open the Block Inspector

3. Navigate to the Primary tab

4. Navigate to General Settings

5. Click the Interactions property to open the Interactions Modal

6. Choose Trigger

7. Click ➕ to add an Interaction

8. Select desired target (Current, Selector)

9. If Selector, input required selector

10. Click ✎ (Edit) to open Interactions Modal)

11. Select Slide Up in dropdown

12. 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

1. Select a block

2. Open the Block Inspector

3. Navigate to the Primary tab

4. Navigate to General Settings

5. Click the Interactions property to open the Interactions Modal

6. Choose Trigger

7. Click ➕ to add an Interaction

8. Select desired target (Current, Selector)

9. If Selector, input required selector

10. Click ✎ (Edit) to open Interactions Modal)

11. Select Slide Down in dropdown

12. Click 🗑 (trash) to remove

Property

The Property property adds a specified property and its value to the target.

Add/Remove

1. Select a block

2. Open the Block Inspector

3. Navigate to the Primary tab

4. Navigate to General Settings

5. Click the Interactions property to open the Interactions Modal

6. Choose Trigger

7. Click ➕ to add an Interaction

8. Select desired target (Current, Selector)

9. If Selector, input required selector

10. Click ✎ (Edit) to open Interactions Modal)

11. Select Property in dropdown

12. Input CSS Property

13. Input Value

14. 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

1. Select a block

2. Open the Block Inspector

3. Navigate to the Primary tab

4. Navigate to General Settings

5. Click the Interactions property to open the Interactions Modal

6. Choose Trigger

7. Click ➕ to add an Interaction

8. Select desired target (Current, Selector)

9. If Selector, input required selector

10. Click ✎ (Edit) to open Interactions Modal)

11. Select Toggle Display in dropdown

12. 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

1. Select a block

2. Open the Block Inspector

3. Navigate to the Primary tab

4. Navigate to General Settings

5. Click the Interactions property to open the Interactions Modal

6. Choose Trigger

7. Click ➕ to add an Interaction

8. Select desired target (Current, Selector)

9. If Selector, input required selector

10. Click ✎ (Edit) to open Interactions Modal)

11. Select Toggle Display Smooth in dropdown

12. 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

1. Select a block

2. Open the Block Inspector

3. Navigate to the Primary tab

4. Navigate to General Settings

5. Click the Interactions property to open the Interactions Modal

6. Choose Trigger

7. Click ➕ to add an Interaction

8. Select desired target (Current, Selector)

9. If Selector, input required selector

10. Click ✎ (Edit) to open Interactions Modal)

11. Select Custom Function in dropdown

12. Add required function (CSS)

13. 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

1. Select a block

2. Open the Block Inspector

3. Navigate to the Primary tab

4. Navigate to General Settings

5. Click the Interactions property to open the Interactions Modal

6. Choose Trigger

7. Click ➕ to add an Interaction

8. Select desired target (Current, Selector)

9. If Selector, input required selector

10. Click ✎ (Edit) to open Interactions Modal)

11. Add required Class

12. Find Target

13. Select required target (Current, Selector, Includes, Parent, With Attribute, With Attribute Value)

14. 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

1. Select a block

2. Open the Block Inspector

3. Navigate to the Primary tab

4. Navigate to General Settings

5. Click the Interactions property to open the Interactions Modal

6. Choose Trigger

7. Click ➕ to add an Interaction

8. Select desired target (Current, Selector)

9. If Selector, input required selector

10. Click ✎ (Edit) to open Interactions Modal)

11. Add required Class

12. Find Target

13. Select required target (Current, Selector, Includes, Parent, With Attribute, With Attribute Value)

14. Find Conditions

15. Select Required condition

16. Click ⌫ to remove