Hi everyone. I made a thing that has been insanely useful for building apps where I want to toggle things… anything. Basically any time you want to toggle a css class, this stimulus controller can do it.
Here is the jsfiddle: Stimulus toggle_controller - JSFiddle - Code Playground
Basically for any element you want to toggle classes on, you make it a target for the controller, then you define
data-toggle-schemes on that element that tell the controller when to toggle it and what class to toggle on it. These values are called the
toggle_id and the
toggle_class. You can have as many toggle schemes as you want to combine toggling effects, etc.
Then you define an element that calls the toggle method in a data-action, for example an icon or a button, and you define
data-target-toggle-schemes on it which tell the controller about the context of the toggle event, or what
toggle_id to match on, essentially. This value is the
The controller then searches its targets and for every target with a matching
toggle_id, it toggles its
But wait, there’s more! You can also specify a
toggle_group and a
toggle_default (on or off) for each
data-toggle-schemes, allowing you to only have one thing within a group toggled at a time, or various combinations of things toggled vs not toggled.
In the JSFiddle I linked above, I am using all of the described behavior, and was able to do css transitions for an element that starts out with
display: none (not usually possible) by toggling an outer container with a different toggle_class from the same click event.
This controller pairs really well with lazy loading turbo frames, since you can simply toggle them to be visible and they will automatically load.
All that said, the syntax needed for this controller is a bit cumbersome and I would love some help making it better. I am open to suggestions, and feel free to use this code or some version of it in your apps!