# Actions

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

<details>

<summary>Add</summary>

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

</details>

## Add Class

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

<details>

<summary>Add</summary>

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

</details>

<details>

<summary>Remove</summary>

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&#x20;
12. Click 🗑 (trash) to remove

</details>

## Remove Class

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

<details>

<summary>Remove</summary>

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

</details>

## Toggle Class

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

<details>

<summary>Add/Remove</summary>

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

</details>

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

<details>

<summary>Add/Remove</summary>

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

</details>

## Slide Up

The Slide Up property adds the necessary CSS properties to smoothly bring the height of an element to 0.

<details>

<summary>Add/Remove</summary>

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

</details>

## Slide Down

The Slide Down property adds the necessary CSS properties to smoothly bring the height of an element to its auto height.

<details>

<summary>Add/Remove</summary>

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

</details>

## Property

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

<details>

<summary>Add/Remove</summary>

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

</details>

## Toggle Display

The Toggle Display property adds the necessary CSS properties to either show or hide the target depending on its current state.

<details>

<summary>Add/Remove</summary>

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

</details>

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

<details>

<summary>Add/Remove</summary>

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

</details>

## Custom Function

The Custom Function property allows you to add custom functions that take priority over built-in functions.

<details>

<summary>Add/Remove</summary>

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

</details>

## 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.&#x20;

{% hint style="danger" %}
You can specify one or multiple targets for every action
{% endhint %}

<details>

<summary>Add/Remove</summary>

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

</details>

## Conditions

{% hint style="danger" %}
You can specify one or multiple conditions for every action&#x20;
{% endhint %}

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.

<details>

<summary>Conditions</summary>

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

</details>

<details>

<summary>Add/Remove</summary>

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

</details>