easy-toggle-state is a pure JS library to toggle the state of any elements using user interface components like checkbox, radio button, tooltip, accordion, tabs, simplified view, etc.
A front-end developer often has to code scripts for interface components. Components such as drop-down menus, navigation buttons, tooltips, expandable panels, simplified boxes, tabs, etc.
The thing is… most of these components display recursive behavior: the trigger element switches the state of one or more of the target elements. So why not code this behavior once and for all?
So here’s the solution: a simple script to switch the state of a trigger element with a CSS class. You can then associate this element with one or more other elements: let’s call them goals. By adding the right HTML attributes, it can adapt to any context and act like the chosen component.
Just focus on modifying the rest with your CSS creativity.
How to make use of it:
Install the library with NPM:
# NPM $ npm install easy-toggle-state --save
Specify the active class when an element is clicked. The default active class is
<element data-toggle-class="active-class"> </element>
Also, apply the active class to a different component:
<element data-toggle-class="active-class" data-toggle-target="target-element"> </element>
Apply the active class to all child parts in a parent component.
<element data-toggle-class="active-class" data-toggle-target-parent="target-element"> </element>
Apply the active class to all sub-elements in itself.
<element data-toggle-class="active-class" data-toggle-target-self="selector"> </element>
Apply the active class to the previous/next components.
<element data-toggle-class="active-class" data-toggle-target-previous> </element> <element data-toggle-class="active-class" data-toggle-target-next> </element>
Toggle State Of DOM Element, Easy Toggle State Plugin/Github
See Demo And Download
Official Website(Twikito): Click Here