UNPKG

easy-toggle-state

Version:

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

twikito.github.io/easy-toggle-state/

Twikito/easy-toggle-state

55 lines (34 loc) • 3.47 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
# [![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)