Mirror click

Mirror a click event from one element to another. Create synchronized actions with a single click.

Copy the Mirror click <script> and paste into the <head> of your page

<!-- [WebTricks by CodeRaccoons] - Mirror click -->
<script async src="https://cdn.jsdelivr.net/gh/TheCodeRaccoons/WebTricks@1/Dist/WebflowOnly/MirrorClick.min.js" ></script>
<!-- [WebTricks by CodeRaccoons] - Mirror click -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/TheCodeRaccoons/WebTricks@1/Dist/WebflowOnly/MirrorClick.min.js" ></script>
Copy Script

Required attributes

Optional
I want this to be the target element that will get the click event when the trigger is activated.
Attribute to add
Name
wt-mirrorclick-element
Value
target-{index}
Instructions

Assign this attribute to the element that should be clicked programmatically.|

The index will be based on the number of Mirror Click elements needed. (e.g. target for the first, target-2 for the second, target-3 for the third and so on).

Where?
Target element
How does it look?
Optional
I want this element to trigger a click on a target element.
Attribute to add
Name
wt-mirrorclick-element
Value
trigger-{index}
Instructions

Assign this attribute to the element that should be clicked programmatically.|

The index will be based on the number of Mirror Click elements needed. (e.g. trigger for the first, trigger-2 for the second, trigger-3 for the third and so on).

Where?
Trigger element
How does it look?

Optional Attributes

No items found.

Working examples

See the Pen WT - Mirror Click by Code Raccoons (@jorchie) on CodePen.