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 toggle_target_id.
The controller then searches its targets and for every target with a matching toggle_id, it toggles its toggle_class.
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!