Easy Toggle State

Easy Toggle State is a tiny JavaScript library for toggling the state of HTML elements with CSS classes, letting you build dropdowns, tooltips, tabs, and other UI components using only HTML attributes and your own CSS.

What is Easy Toggle State?

Easy Toggle State is a tiny JavaScript library that toggles a CSS class on a trigger element and any number of associated target elements, enabling UI components like dropdowns, navigation buttons, tooltips, collapsible panels, lightboxes, tabs, and switches. It runs entirely in the browser and requires no framework — you add a single script and then control behavior with HTML attributes. The library is created by Matthieu Bué and released under the MIT License.

Key Features

• HTML attribute API — You set attributes on trigger elements to declare targets and toggle behavior; no JavaScript coding needed.
• Multiple targets — A single trigger can toggle one or more target elements, so you can build accordions, tabs, or panels with shared controls.
• CSS-only styling — The library only adds/removes a CSS class; all visual appearance is handled entirely with your own CSS.
• Framework-agnostic — Works with any HTML page or project regardless of the underlying framework, since it operates on plain DOM elements.
• ES5 and ES6 builds — The dist folder contains separate ES5 and ES6 versions, so you can pick the one that matches your browser support needs.
• MIT licensed — Free to use in personal and commercial projects, with no attribution string required beyond preserving the license.
• Multiple installation options — Install via npm (npm install easy-toggle-state), link from cdnjs, or download the minified file directly from the GitHub repository.

Who is it for?

• Front-end developers who build repeated UI interactions and want to stop writing the same toggle logic for every component.
• Prototypers who need working dropdowns, tabs, or lightboxes quickly and only want to write CSS.
• Students learning JavaScript who want to see how a state-toggle pattern works with a small, readable codebase.

What can you do with Easy Toggle State?

• Navigation menus: Create mobile hamburger menus that toggle an open class on the navigation container.
• Tooltips and popovers: Attach a trigger to a hidden tooltip element so it appears on click or tap.
• Collapsible panels and accordions: Toggle visibility of content sections with a single trigger each.
• Tabs and switches: Control which panel is active by toggling state on tab buttons and their associated content.

How does Easy Toggle State work?

Install the script via npm install easy-toggle-state, link from cdnjs, or download the minified file directly. Then add the appropriate HTML attributes to your trigger and target elements — the library listens for the defined events and toggles the CSS class on the trigger and targets. The documentation at twikito.github.io/easy-toggle-state/ includes examples and a full attribute reference.

FAQ

Is Easy Toggle State free?

Yes, Easy Toggle State is open source and released under the MIT License, so you can use it freely in personal and commercial projects.

Does Easy Toggle State require jQuery or a framework?

No. Easy Toggle State is vanilla JavaScript and works directly on the DOM, so it can be used in plain HTML pages or alongside any framework.

How do I install Easy Toggle State?

You can install it with npm (npm install easy-toggle-state), link it from cdnjs, or download the minified file directly from the GitHub repository. Both ES5 and ES6 builds are available in the dist folder.

What components can I build with Easy Toggle State?

Common examples shown in the documentation include dropdowns, navigation buttons, tooltips, collapsible panels, lightboxes, tabs, and switches. The pattern works for any component that involves toggling a class on one or more elements.