Mirror Click

Mirrors click events between two elements

Overview

The Mirror Click attribute allows you to mirror click events from one element to another. When a user clicks the trigger element, a click event is automatically fired on the target element, enabling you to create custom click handlers and improve user interactions.

Attribute Syntax

Elements

fs-mirrorclick-element · string · required

Defines the role of the element:

• trigger - The element that users click
• target - The element that receives the mirrored click event

Settings

fs-mirrorclick-delay · number

Defines a delay (in milliseconds) before the click event is replicated on the target element.

Usage Examples

Basic Click Mirroring

<!-- Click button mirrors to link -->
<button fs-mirrorclick-element="trigger">Submit</button>
<a href="/thank-you" fs-mirrorclick-element="target" style="display: none;">Hidden Link</a>

Common Use Cases

Expandable Click Areas

Make entire cards or containers clickable by mirroring clicks to a hidden link or button inside them.

Custom Form Controls

Create custom-styled buttons that trigger native form submissions or file inputs.

Modal Triggers

Allow multiple elements to open the same modal by mirroring clicks to the modal trigger button.

Enhanced Navigation

Create large, custom navigation elements that trigger standard navigation links.

Interaction Chaining

Trigger Webflow interactions by mirroring clicks to elements with interaction triggers.

Accessibility Improvements

Make non-interactive elements (like cards) clickable while maintaining a proper link target for screen readers.

Implementation Patterns

Card Links

<div class="card" fs-mirrorclick-element="trigger">
  <img src="product.jpg" alt="Product">
  <h3>Product Name</h3>
  <p>Description...</p>
  <a 
    href="/products/product-name" 
    fs-mirrorclick-element="target"
    class="card-link">
    Learn More
  </a>
</div>

<style>
.card-link {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
</style>

Delayed Animations

<!-- Trigger with delay for animation -->
<div 
  class="animated-trigger" 
  fs-mirrorclick-element="trigger"
  fs-mirrorclick-delay="300">
  Click Me
</div>

<button 
  fs-mirrorclick-element="target"
  data-animation="fade-in">
</button>

How It Works

1. The trigger element listens for click events
2. When clicked, it finds the corresponding target element
3. After the specified delay (if any), it programmatically clicks the target
4. Any click handlers or interactions on the target are triggered

Hide the target element with display: none or position it absolutely with opacity: 0 if you only want the trigger to be visible.

Mirror Click works with any clickable element including buttons, links, and form inputs. The target element will behave as if it was clicked directly by the user.

Accessibility Considerations

• Ensure the target element is semantically appropriate (use <a> for links, <button> for actions)
• Keep the target element in the DOM (don’t use display: none) if you need it to be accessible to screen readers
• Consider using aria-label on trigger elements to provide context
• Test keyboard navigation to ensure interactive elements remain accessible