Set the on and off classes per variable to toggle

The on/off class can be configured per variable state.

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

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

Input

html

<div data-controller="toggler" class="example">
    <!-- togglers -->
    <button id="btn_toggle_8_color" data-toggler-states="8_color">Toggle 8_color var</button>
    <button id="btn_toggle_8_font" data-toggler-states="8_font">Toggle 8_font var</button>
    <button id="btn_toggle_8_color_font" data-toggler-states="8_color,8_font">Toggle 8 both vars</button>
    <!-- elements to toggle -->
    <div id="div_8"
                    data-toggler-target="toggleable"
                    data-toggler-listen="8_color,8_font"
                    data-toggler-classes-on-8_color="bg-fuchsia-500"
                    data-toggler-classes-off-8_color="bg-stone-500"
                    data-toggler-classes-on-8_font="text-xl"
                    data-toggler-classes-off-8_font="text-xs">
        Eigtht (8) listening 2 vars (font and color)
    </div>
</div>

Output

Eigtht (8) listening 2 vars (font and color)

Set the on and off classes per variable to toggle #

Set the on and off classes per variable to toggle