easy-toggle-state - GitLite

KO | EN

gitlite — search

#javascript #python #react #golang #go #machine-learning #deep-learning #linux #macos #nodejs #windows #kubernetes #awesome-list #open-source

easy-toggle-state

(★ 281)

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

파일 탐색기

최종 버전 다운로드 (.zip)

- - bug_report.md
  - feature_request.md
- easy-toggle-state.es5.js
- easy-toggle-state.es5.min.js
- easy-toggle-state.js
- easy-toggle-state.min.js
- demo.html
- filesize.json
- humans.txt
- index.html
- - constants.js
  - events.js
  - prefix.js
- - dispatch-hook.js
  - manage-aria.js
  - retrieve-class-list.js
  - retrieve-group-active-element.js
  - retrieve-namespaced-property.js
  - retrieve-query-selector-all.js
  - retrieve-targets.js
  - toggle-class-list.js
- - main.js
- index.js
- generate-demo-database.js
- generate-file-size.js
.editorconfig
.eslintignore
.eslintrc.js
.gitignore
.npmignore
.prettierrc.js
LICENSE
logo.png
package.json
README.md
rollup.config.js

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# [![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)