A Tiny JavaScript Library to Easily Switch any HTML Element | Easy Toggle State

UI components are made in minutes without worrying about JavaScript. Only set some HTML themes, and code the rest using your CSS skills. The important purpose of this library is to toggle the CSS class of a component when the factor or one other factor is clicked.

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.

Why?

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

Download the zip and then include the primary JavaScript file on the webpage.

<script src="easy-toggle-state.es6.min.js"></script>

Specify the active class when an element is clicked. The default active class is is-active.

<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

This superior jQuery/javascript plugin is developed by Twikito. For extra Advanced Usage, please go to the official website.

Share