Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/Twikito/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.
https://github.com/Twikito/easy-toggle-state

checkbox css dropdown javascript lightboxes navigation-buttons radio switch tabs toggle tooltip tooltips trigger-element ui-components

Last synced: 19 days ago
JSON representation

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

Host: GitHub
URL: https://github.com/Twikito/easy-toggle-state
Owner: Twikito
License: mit
Created: 2018-03-08T20:29:33.000Z (over 6 years ago)
Default Branch: master
Last Pushed: 2021-07-26T04:21:29.000Z (over 3 years ago)
Last Synced: 2024-09-19T02:39:11.529Z (about 2 months ago)
Topics: checkbox, css, dropdown, javascript, lightboxes, navigation-buttons, radio, switch, tabs, toggle, tooltip, tooltips, trigger-element, ui-components
Language: JavaScript
Homepage: https://twikito.github.io/easy-toggle-state/
Size: 7.66 MB
Stars: 281
Watchers: 8
Forks: 35
Open Issues: 17
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

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)