Click Mirror

By Casey Muns

The Goal:

Mirror mouse clicks from one element to another

Use case:

Create a tabs element with a hidden tab-menu and use a custom link menu to switch between tabs.

New link menu:

Tab 1 LinkTab 2 LinkTab 3 Link
Tab 1
Tab 2
Tab 3

Tab One

Tab Two

Tab Three

Tab 1 B
Tab 2 B
Tab 3 B

Tab One B

Tab Two B

Tab Three B

<script>
document.addEventListener('click', function(event) {
    // Find the closest ancestor of the clicked element (including itself)
    // that has the 'click-mirror-source' attribute.
    const sourceElement = event.target.closest('[click-mirror-source]');

    // Proceed only if such an element was found.
    if (sourceElement) {
        // Extract the 'click-mirror-source' value.
        const sourceValue = sourceElement.getAttribute('click-mirror-source');

        // Use the value to find all corresponding 'click-mirror-target' elements.
        document.querySelectorAll(`[click-mirror-target="${sourceValue}"]`).forEach(targetElement => {
            // Simulate a click on each target element.
            const clickEvent = new MouseEvent('click', {
                bubbles: true,
                cancelable: true
            });
            targetElement.dispatchEvent(clickEvent);
        });
    }
});
</script>

Implement in Webflow:

1. Install the SCRIPT:

  • Put the script in the custom code section in page settings or in an on page HTML embed.

2. Set up click SOURCES:

  • On the element that you want to trigger the click event, add the attribute click-mirror-source="source1"

3. Set up click TARGETS:

  • On the element that you want to receive the click event, add the attribute click-mirror-target="source1"
  • ‍

4. That's it.

  • You can replace "source1" with any identifier you want.
  • You can have multiple sources/targets on the page. Just make sure the source and target elements have matched identifiers.
  • If there are multiple targets matching one source it will click them all.