Set the on and off classes to toggle

When a variable is set to on, the listener elements will add the on-classes and remove the off-classes, and viceversa.

Variable can have a different set of classes for both on/off states.

data-toggler-classes-on="..." are the classes that wil be added when state is on and removed when the state is off.

data-toggler-classes-off="..." are the classes that wil be removed when state is on and added when the state is off.

Input

html

<div data-controller="toggler" class="example">
    <!-- togglers -->
    <button id="btn_toggle_6" data-toggler-states="div_6">Toggle background 6</button>
    <button id="btn_toggle_6_7" data-toggler-states="div_6,div_7">Toggle background 6 and 7</button>
    <!-- elements to toggle -->
    <div id="div_6"
                    data-toggler-target="toggleable"
                    data-toggler-listen="div_6"
                    data-toggler-classes-on="bg-fuchsia-500"
                    data-toggler-classes-off="bg-stone-500">
        Sixth (6) starting off
    </div>
    <div id="div_7" class="bg-amber-500"
                    data-toggler-target="toggleable"
                    data-toggler-listen="div_7"
                    data-toggler-classes-on="bg-amber-500"
                    data-toggler-classes-off="bg-zinc-500">
        Seventh (7) starting on
    </div>
</div>

Output

Sixth (6) starting off

Seventh (7) starting on

INFO

No data-toggler-classes means data-toggler-classes-on="" and data-toggler-classes-off="hidden"

data-toggler-classes="my-class" means data-toggler-classes-on="my-class" and data-toggler-classes-off=""

Set the on and off classes to toggle #

Set the on and off classes to toggle