AttRibutes
Mirror Click Events
What is this page about?

Attributes, by Finsweet, offers a free series of Solutions that provide essential features to improve your Webflow websites.

Mirror Click Events

Mirror a click event from one element to another element in Webflow.

Watch a quick tutorial

Mirror Click Events • Flash Card

Copy Script

For advanced users familiar with this solution. Includes all attributes from this page. Click on attributes and values to copy them.

Required and Optional attributes

Trigger

Add to any element

fs-mirrorclick-element
=
"
trigger
"

Target

Add to any element

fs-mirrorclick-element
=
"
target
"

Delay (Optional)

Add to element with fs-mirrorclick-element"trigger"

fs-mirrorclick-delay
=
"
TIME_IN_MS
"
1

Add this <script> inside the <head> tag of your page or project

This script is the universal Attribute script: you only need to include it once, even if you have multiple Attribute solutions on the page. Learn more .

<script async type="module"
src="https://cdn.jsdelivr.net/npm/@finsweet/attributes@2/attributes.js"
fs-mirrorclick
></script>

Copy Script
2

Add these required attributes to the elements

Trigger

This is the element you want to click on.
fs-mirrorclick-element
=
"
trigger
"

Clicking on this element will trigger a click event on another element on the page.

Add this attribute:
Name
fs-mirrorclick-element
Copy
Value
trigger
Copy
Add it to those type(s) of element(s):
Any element
EXAMPLE

For instance, a <button> or any div element on the page designed to submit a form upon being clicked, even if it isn't the default form submission button.

Target

This is the element that will get a click event
fs-mirrorclick-element
=
"
target
"

This element acts as a mirrored click target. It is activated when the Trigger element is clicked.

Add this attribute:
Name
fs-mirrorclick-element
Copy
Value
target
Copy
Add it to those type(s) of element(s):
Any element
EXAMPLE

As depicted in the illustration above, the Target elements could be the navigation arrows of a Slider element. These elements can be tricky to position, particularly if the goal is to place them outside the Slider element.

3

Publish your project! Done, easy right?

Check more elements and settings below
Optional

Add more

settings

Delay

Add a pause before the click event on the target happens
fs-mirrorclick-delay
=
"
TIME_IN_MS
"

When you click on the Trigger element, the Solution waits for the specified time before activating the click event on the Target element.

EXAMPLE

If a delay of 500 is set using fs-mirrorclick-delay = "500", then the click event on the Target will happen exactly half a second after users click on the Trigger element.

Add this attribute:
Name
fs-mirrorclick-delay
Copy
Value
TIME_IN_MS
Copy
Example:
fs-mirrorclick-delay = "500"
Add it to any element with
fs-mirrorclick-element = "trigger"
script icon
Script tag
?
Optional

Add more

Instances

Define an instance on a common parent wrapper

fs-mirrorclick-instance
=
"
IDENTIFIER
"

If you wish to create multiple instances of this solution on the same page, please follow the steps below:

  1. Select a wrapper parent that contains all the elements of an instance.
  2. Add an -instance attribute to it, with a unique value.
  3. Repeat for every instance.
Add this attribute:
Name
fs-mirrorclick-instance
Copy
Value
IDENTIFIER
Copy
Examples:
fs-mirrorclick-instance = "1"
fs-mirrorclick-instance = "2"
fs-mirrorclick-instance = "blog"
fs-mirrorclick-instance = "team"
Learn more ways to set up multiple instances and how it works

Still need help?

Get Support