data-aether-target

This attribute determines where the interaction will be applied. It builds the bridge between a trigger and the HTML element intended to be managed.

01 Operating Logic

The data-aether-target attribute works with standard HTML ID selectors. The value you provide to the trigger must exactly match the id attribute of the element to be managed.

index.html

<!-- trigger -->
<button 
    data-aether-trigger="ui-control"
    data-aether-target="user-dropdown"
>
    ...
</button>

<!-- target -->
<div id="user-dropdown" class="hidden...">
    ...
</div>

02 Use Cases

This attribute is used not only in triggers but also in grouping elements in certain cases.

Element Type	Role
Trigger	Determines which element will be toggled. (Most common use)
Tab Button	Determines which tab panel will become active.
Accordion Header	Determines which accordion panel will be expanded.