Set the class to toggle

By default, the class to toggle is hidden.

This can be overriden with data-toggler-classes="...".

Input

html

<div data-controller="toggler" class="example">
    <!-- togglers -->
    <button id="btn_toggle_4" data-toggler-states="div_4">Toggle fuchsia 4</button>
    <button id="btn_toggle_5" data-toggler-states="div_5">Toggle fuchsia 5</button>
    <button id="btn_toggle_4_5" data-toggler-states="div_4,div_5">Toggle fuchsia 4 and 5</button>
    <!-- elements to toggle -->
    <div id="div_4" class="bg" data-toggler-target="toggleable" data-toggler-listen="div_4" data-toggler-classes="bg">Forth (4) fuchsia starting ON</div>
    <div id="div_5"            data-toggler-target="toggleable" data-toggler-listen="div_5" data-toggler-classes="bg">Fifth (5) fuchsia starting OFF</div>
</div>

Output

Forth (4) fuchsia starting ON

Fifth (5) fuchsia starting OFF

INFO

data-toggler-classes="... is an alias of class-on having class-off empty

(see "classes on/off" example)

Set the class to toggle #

Set the class to toggle