Interactions

Interactions add behaviour to an element without writing JavaScript: when this happens,
do that. Click a card and it toggles a class; scroll a section into view and something
elsewhere on the page changes.

Every interaction is built the same way — pick a trigger, then add the actions that
run when it fires. Everything you build is stored on the element and rendered as a
data-interactions attribute, so there are no inline scripts and no script file to
maintain.

Trigger

The trigger is what starts the interaction. One interaction has exactly one.

Open the Interactions tab, add an interaction, and choose the trigger from the
dropdown.

Available triggers

Trigger	Fires when
Click	The visitor clicks the target
Mouse Enter	The pointer moves onto it
Mouse Leave	The pointer moves off it
Scroll Into View	It comes into the viewport
Key Down	A key goes down
Key Up	A key comes back up
Page Loaded	The page finishes loading
Page Scrolled	The visitor scrolls the page

Available targets

Target, under the trigger, decides what the visitor has to interact with:

• This Element — the default. The trigger listens on the element you're editing.
• CSS Selector — listen on something else. A field appears for the selector, and a
  Match dropdown for narrowing which matching elements count; see
  Targets under Actions, which works the same way.

Actions

When the trigger fires, its actions run. An action is one thing to do — add a class, show
an element, scroll somewhere — and an interaction can have as many as you like; they run
together.

Available actions

Action	What it does
Add Class / Remove Class / Toggle Class	Puts a class on the target, takes it off, or flips it. Type the class name without a leading dot.
Show Element / Hide Element	Shows or hides the target.
Set Attribute / Remove Attribute	Writes or clears an HTML attribute.
Set Variable	Sets a variable's value.
Scroll To	Scrolls the page to the target.
Focus / Blur	Moves focus onto the target, or off it.
JavaScript Function	Calls a function you've defined, for anything the actions above don't cover.

Toggle Class is the one to reach for first. Pair it with a nested selector on that class
and you have a state-driven UI without a line of JavaScript — see
Nested Selectors.

Targets

Each action has its own Target, which needn't be the thing that was triggered. Leave it
at This Element, or switch it to CSS Selector to point at something else entirely.

Choosing CSS Selector adds two controls: a field for the selector, and a Match
dropdown offering Everywhere, Only Children Of This Element, Closest Parent and
Children of Target.

Match is what makes a repeated interaction behave. Give ten accordion headers the same
"toggle is-open on .faq-item" action and leave Match at Everywhere, and one click opens
all ten. Set it to Closest Parent and each header toggles only its own item — the same
configuration, copied freely, staying independent.

Advanced settings

Each action has an Advanced popout with two settings:

• Run Only Once — the action runs the first time the trigger fires and never again.
  Useful for a page-load animation you don't want repeating on every scroll.
• Disable At — stops the action below a chosen breakpoint, so a hover behaviour that
  makes no sense on a phone simply doesn't run there.

Tips