What is Stimulus Toggler? #

It is a Hotwired Stimulus controller used to toggle classes of the DOM elements.

How it works? #

The controller set variables to on/off when an element triggers the action with
data-action="toggler#states".

The values that action want to set for the variables are defined by
data-toggler-states.

If only data-toggler-states is set in an element, the controller will attach the action automatically so you don't have to take care of it. See Automatic aliasing section.

Setting variables #

Using the token + before a variable, will set it to on.
Using the token - before a variable, will set it to off.
Without any token, it toggles the variable.

Examples:

<!-- Clicking here, it will... -->
<button data-toggler-states="-sidebar">...set "sidebar" to off</button>
<button data-toggler-states="+sidebar">...set "sidebar" to on</button>
<button data-toggler-states="sidebar">...toggle "sidebar" on/off</button>

Reacting to variable changes #

Using the mutation observer provided by Stimulus, as soon as a variable changes, other elements react to it adding, removing or toggling their classes accordingly.

Examples:

<!-- We listen to the variable sidebar, by default the class to toggle is `hidden` -->
<div
    data-toggler-target="toggleable"
    data-toggler-listen="sidebar">
        This is my fancy sidebar
</div>

Other rules #