Click Triggers

Invoke an Event by clicking any element

Use Cases

• Click a button to select a specific tab

Usage Notes

sa-trigger-click = ( event name )

Place on any element that should be invoke the specified event when it is clicked.

Assign whatever event name you like, depending on your trigger-event-action setup.

Example

This is a simple mirror-click setup. Clicking the link clicks the corresponding button. they are connected by virtue of the Event name.

Trigger;

<a sa-trigger-click="my-event">Click me</a>

Action;

<button sa-action-click="my-event">Hidden button</button>

Future

Link Triggers

Place on a container, esp. a rich text element.

sa-trigger-click:context = child-links

This changes the trigger setup so that the parent element is ignored, and only links within it are triggered.

Generally you would also also specify a namespace;

sa-trigger-click:ns = ( namespace )

Link Triggers | Example

<div class="w-richtext" sa-trigger-click="*" sa-trigger-click:context="child-links" sa-trigger-click:ns="myns">
  <p>Some text and <a href="##mylink">a link</a></p> 
</div>

In this example;

• A Webflow Richtext element is being used

• The :context attribute is used and specifies child-links

• The :ns attribute is used and specifies myns as the namespace name

• Within it is a link, with an href of ##mylink

In this setup;

• All links beginning with ## are treated as SA5 Triggers.

• The event name they trigger follows the ##, in this example the event name is mylink

• They are handled as click triggers due to the attribute on the rich text element, and the :context setting

Inside,

##link2

This is a click trigger for that event

In this example;

The event fired on link click will be ns1.link2

Consider sa-trigger-click:* as the indicator for children