data-aether-active-class & inactive-class

AetherJS is unstyled by default. These two attributes allow you to dynamically swap CSS classes based on the state of elements (Open/Closed, Selected/Unselected).

01 Operating Principle

When an element becomes active, the system removes the classes in inactive-class and adds those in active-class. It does the exact opposite when the element becomes passive.

Attribute	Role	Typical Usage
data-aether-active-class	Classes to be applied when the element is active.	bg-blue-600 text-white (For buttons) block (For targets)
data-aether-inactive-class	Classes to be applied when the element is passive.	bg-gray-200 text-gray-500 (For buttons) hidden (For targets)

02 Usage

It is particularly used in Tab and Accordion headers to indicate which item the user has selected.

index.html

<!-- Wrapper -->
<div
    data-aether-ui="accordion-group"
    data-aether-allow-multiple>

    <!-- Item 1 -->
    <div>
        <button
            class="cursor-pointer text-lg"
            data-aether-active-class="text-accent"
            data-aether-inactive-class="text-primary"
            data-aether-trigger="accordion"
            data-aether-target="brands">
            Brands
        </button>
        <div
            id="brands"
            class="text-secondary"
            data-aether-ui="accordion-panel">
            Nike, Adidas, Puma...
        </div>
    </div>

    <!-- Item 2 -->
    <div>
        <button
            class="cursor-pointer text-lg"
           data-aether-active-class="text-accent"
            data-aether-inactive-class="text-primary"
            data-aether-trigger="accordion"
            data-aether-target="sizes">
            Sizes
        </button>
        <div
            id="sizes"
            class="text-secondary"
            data-aether-ui="accordion-panel">
            S, M, L, XL...
        </div>
    </div>

</div>