Docs

Interactions

Make elements respond to clicks, hovers and scrolling without writing code.

On this page

Interactions make things happen on the live page when visitors click, hover or scroll: show a hidden panel, toggle a class, open a popup, scroll to a section. You set them up as simple sentences: When something happens, do an action on an element.

The Interactions section of a button with one interaction: When Clicked, do Show / hide, on another element, and the Start hidden switch
An interaction: when the button is clicked, show or hide another element.

Add an interaction

  1. Open Interactions

    Select the element that visitors interact with, for example a button, and open Behaviour → Interactions.

  2. Add a row

    Click Add an interaction. A new row reads When Clicked, do Show / hide, on another element.

  3. Choose the trigger

    Pick what starts it in When.

  4. Choose the action and the target

    Pick what happens in do, and which element it happens to in on: this element, another element (choose it from the list of elements on the page) or a CSS selector.

  5. Add a delay (optional)

    Type a number of milliseconds in after … ms to wait before the action runs.

Add more rows for more interactions. Click × (Remove this interaction) to delete one. Interactions run on the live page, not while you edit: preview the page to test them.

Triggers

TriggerWhen it runs
ClickedVisitors click or tap the element. It also works with the keyboard (Enter or Space).
Mouse enters / Mouse leavesThe pointer moves onto or off the element.
Scrolls into view / Scrolls out of viewThe element appears on screen, or leaves it after being seen.
Page loadsThe page has opened.
Page scrolled past…The page has scrolled further than a number of pixels (by … px). When visitors scroll back up, the action is undone.

Actions

ActionWhat it does
Show / hideShows the target if it is hidden, hides it if it is visible.
Show / HideShows or hides the target.
Toggle class / Add class / Remove classChanges a CSS class on the target, for example is-open. Style the class with a custom selector such as &.is-open.
Set attribute / Remove attributeSets an HTML attribute on the target (name=value, for example aria-pressed=true) or removes it.
Open popup / Close popupOpens a popup you built in the Theme Builder, or closes the popup the element is in. See Popups.
Scroll toScrolls smoothly to the target, stopping below a sticky header.

Examples

A "Read more" button that reveals extra text

  1. Select the extra text (or its container) and turn on Start hidden in Behaviour → Interactions. In the editor it stays visible, dimmed, so you can still edit it.
  2. Select the button and add: When Clicked, do Show / hide, on another element → choose the extra text.

A header that changes after scrolling

  1. Select the header container and add: When Page scrolled past… by 80 px, do Add class, on this element, with the class is-scrolled.
  2. In the Design tab, choose Custom selector… in the state list, type &.is-scrolled, and give that state a background color and a smaller padding.

When visitors scroll back to the top, the class is removed again.

Tip

For common cases there are ready-made settings: sticky and shrinking headers in Page settings, popups with triggers in Popups, and the Off-Canvas, Accordion and Tabs widgets.

Good to know

  • Rows that are not complete (no element chosen, no class name, no popup) are dropped when you save. Check each row before you leave the editor.
  • An element you click that is not a link or button becomes keyboard accessible automatically, and screen readers are told whether the target is expanded.
  • For interactions that depend on who the visitor is (logged in, a date, a URL parameter), use display conditions instead: they decide on the server whether an element is on the page at all.
Hover & other statesStyle classes and states. Open a popup from a linkOther ways to open popups.