# Interactions

The Interactions properties encapsulate all the different settings that will allow you to apply an unlimited scope of actions on a block when a user interacts using a specified trigger.

Cwicly Interactions can be thought of as visual scripting.

  1. Select a block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Navigate to General Settings
  5. Toggle the Interactions property to open the Interactions panel
  1. Select a block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Navigate to General Settings
  5. Toggle the Interactions property to open the Interactions panel
  6. Click the reset button to remove interaction

# Selector

The Selector property allows you to define whether the target block is the current element you are clicking on or an element you choose by providing a selector such as class, or an ID using CSS conventions such as a dot for a class, a hash for an ID etc…

  1. Select a block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Navigate to General Settings
  5. Click on the Interactions icon to open the Interactions modal
  6. Select desired selector

# Action

An Interaction Action allows you to apply a specific action to the specified Interaction trigger. You can choose between a variety of actions.

  1. Select a block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Navigate to General Settings
  5. Click on the Interactions icon to open the Interactions modal
  6. Click on the icon
  1. Select a block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Navigate to General Settings
  5. Click on the Interactions icon to open the Interactions modal
  6. Find the action property
  7. Select the desired action
  1. Select a block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Navigate to General Settings
  5. Click on the Interactions icon to open the Interactions modal
  6. Click the icon to remove action

Add Class Adds a specified class

Remove Class Removes a specified class

Toggle Class Adds/Removes a given class depending on the current state of the target

Slide Up Adds the necessary CSS properties to smoothly bring the height of an element to 0

Slide Down Adds the necessary CSS properties to smoothly bring the height of an element to its auto height

Toggle Slide 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

Property Add the specified property and its value to the target

Toggle Display Adds the necessary CSS properties to either show or hide the target depending on its current state

Toggle Display Smoothly Adds the necessary CSS properties to either show or hide with a fade in the target depending on its current state

# Target

The Target property allows you to choose the target on which you want the action applied.

  1. Select a block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Navigate to General Settings
  5. Click on the Interactions icon to open the Interactions modal
  6. Select the desired target
  1. Select a block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Navigate to General Settings
  5. Click on the Interactions icon to open the Interactions modal
  6. Click the icon to remove the target

Current Defines the target as the clicked element.

Selector Defines the target as an element you have selected such as class or ID

Include Defines that the target must include a specified class (input without dot).

Parent Defines that the target is the Parent block.

With Attribute Defines that the target must have a specified attribute (input full attribute).

With Attribute Value Defines that the target must have a specified attribute value.

# Conditions

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.

  1. Select a block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Navigate to General Settings
  5. Click on the Interactions icon to open the Interactions modal
  6. Select the desired condition
  1. Select a block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Navigate to General Settings
  5. Click on the Interactions icon to open the Interactions modal
  6. Click the icon to remove the condition

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 attribut value.