data-aether-trigger

This attribute transforms an HTML element (usually a button or a link) into an interactive controller. It is the key that initiates AetherJS's interaction chain.

01 Usage

To make an element a trigger, you must assign an interaction type to the data-aether-trigger attribute. Additionally, a target must be specified to indicate which element this trigger will affect.

index.html

<button 
    data-aether-trigger="ui-control"
    data-aether-target="modal-1"
>
    ...
</button>

02 Accepted Values

This attribute can take three different values depending on the intended use.

Value	Purpose	Example Scenario
ui-control	General purpose controller.	Modals, Off-canvas menus, Dismiss buttons.
tab	Tab switcher.	Switching between content panels in tab groups.
accordion	Expandable list trigger.	FAQ pages, Detailed filtering menus.

03 Dependencies

Target Requirement

When you assign data-aether-trigger to an element, the system needs to know which element it will control.

Therefore, wherever you use this attribute, you must also define the data-aether-target="ID" attribute. The target value must be the ID of the HTML element to be controlled.