# easy-toggle-state

> A tiny JavaScript library to easily toggle the state of any HTML element in any contexts, and create UI components in no time.

Latest version **1.16.0** (published 2020-12-30) · MIT license · 350 weekly downloads

## Install

```sh
npm install easy-toggle-state
pnpm add easy-toggle-state
yarn add easy-toggle-state
bun add easy-toggle-state
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.16.0 |
| Published | 2020-12-30 |
| First published | 2018-03-27 |
| Weekly downloads | 350 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 107.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 281 |
| Author | Matthieu Bué |
| Maintainers | twikito |
| Keywords | toggle, switch, accessibility, ui components, dropdown, modal, tooltip, navigation button, lightbox, tabs, checkbox, radio |

## Links

- npm: https://www.npmjs.com/package/easy-toggle-state
- Repository: https://github.com/Twikito/easy-toggle-state
- Homepage: https://twikito.github.io/easy-toggle-state/
- Issues: https://github.com/Twikito/easy-toggle-state/issues
- npm.io page: https://npm.io/package/easy-toggle-state

## Alternatives

- [react-native-root-siblings](https://npm.io/package/react-native-root-siblings.md) — 102.9K weekly downloads
- [@praxisui/dialog](https://npm.io/package/@praxisui/dialog.md) — 2.0K weekly downloads
- [ngx-lightbox-evp](https://npm.io/package/ngx-lightbox-evp.md) — 19 weekly downloads
- [react-native-modal-translucent-axton](https://npm.io/package/react-native-modal-translucent-axton.md) — 4 weekly downloads
- [jdc-popup](https://npm.io/package/jdc-popup.md) — 2 weekly downloads

## Recent versions

- 1.16.0 (latest) — 2020-12-30
- 1.15.1 — 2020-11-16
- 1.15.0 — 2020-11-05
- 1.14.2 — 2020-11-03
- 1.14.1 — 2020-10-07
- 1.14.0 — 2020-10-05
- 1.13.0 — 2020-09-29
- 1.12.7 — 2020-09-14
- 1.12.6 — 2020-09-14
- 1.12.5 — 2020-01-29
- 1.12.4 — 2019-12-06
- 1.12.3 — 2019-10-18
- 1.12.2 — 2019-08-27
- 1.12.1 — 2019-07-05
- 1.12.0 — 2019-07-03
- … 35 more at https://npm.io/package/easy-toggle-state/versions

## README

# [![Easy Toggle State](https://raw.githubusercontent.com/Twikito/easy-toggle-state/master/logo.png)](https://twikito.github.io/easy-toggle-state/)

__A tiny JavaScript library to easily toggle the state of any HTML element in any contexts, and create UI components in no time.__

Dropdown, navigation button, tooltip, collapsible panel, lightbox, tabs, switches…
UI components made in minutes without worried about JavaScript. Only set a few HTML attributes, and code the rest with your CSS skills.

See some examples in [the documentation](https://twikito.github.io/easy-toggle-state/#examples).

## Status

[![GitHub release (latest by date)](https://img.shields.io/github/v/release/Twikito/easy-toggle-state?style=flat-square)](https://github.com/Twikito/easy-toggle-state/releases)
[![npm](https://img.shields.io/npm/v/easy-toggle-state?style=flat-square)](https://www.npmjs.com/package/easy-toggle-state)
[![Cdnjs](https://img.shields.io/cdnjs/v/easy-toggle-state?style=flat-square)](https://cdnjs.com/libraries/easy-toggle-state)
[![npm bundle size](https://img.shields.io/bundlephobia/min/easy-toggle-state?style=flat-square)](https://github.com/Twikito/easy-toggle-state/blob/master/dist/easy-toggle-state.min.js)
[![npm bundle size](https://img.shields.io/bundlephobia/minzip/easy-toggle-state?style=flat-square)](https://github.com/Twikito/easy-toggle-state/blob/master/dist/easy-toggle-state.min.js)

[![David](https://img.shields.io/david/Twikito/easy-toggle-state?style=flat-square)](https://david-dm.org/Twikito/easy-toggle-state)
[![David](https://img.shields.io/david/dev/Twikito/easy-toggle-state?style=flat-square)](https://david-dm.org/Twikito/easy-toggle-state?type=dev)

## Why?

A front-end developer often has to __code scripts for interface components__. Components such as drop-downs, navigation buttons, tooltips, expandable panels, lightboxes, tabs, etc.

The thing is… Most of these components expose a __recurrent behavior__: a trigger element toggles the state of one or more target elements. So why not code this behavior once and for all?

So here is a solution: __a simple script to toggle the state of a trigger element__ with a CSS class. You can then __associate this element__ with one or more others: let's call them targets. By adding the right HTML attributes, it can __adapt to any contexts__ and behave like a chosen component.

__Only focus on adjusting the rest with your CSS creativity__.

## Quick start

Several quick start options are available:

- [Direct download](https://rawgit.com/Twikito/easy-toggle-state/master/dist/easy-toggle-state.min.js)
- Choose another version: [ES5 or ES6](https://github.com/Twikito/easy-toggle-state/tree/master/dist)
- [Link from cdnjs](https://cdnjs.com/libraries/easy-toggle-state)
- Install with [npm](https://www.npmjs.com/package/easy-toggle-state): `npm install easy-toggle-state`

## Documentation

Easy Toggle State's full documentation is hosted on GitHub Pages at [twikito.github.io/easy-toggle-state/](https://twikito.github.io/easy-toggle-state/).

## Contribution

- Clone the repo: `git clone https://github.com/twikito/easy-toggle-state.git`
- Development: `npm run build`
- [Fork repository on GitHub](https://github.com/Twikito/easy-toggle-state/fork)
- [Report a bug](https://github.com/Twikito/easy-toggle-state/issues)
- [Suggest a feature](https://github.com/Twikito/easy-toggle-state/issues)

## License

MIT. Copyright (c) [Matthieu Bué](https://twikito.com)

---
_Source: https://npm.io/package/easy-toggle-state · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._