Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

https://github.com/rah-emil/easy-toggler

Simple class switcher on web elements. JavaScript only.
https://github.com/rah-emil/easy-toggler

class dropdown easy-toggle easy-toggler js-lib tabs toggle toggle-class toggle-class-javascript toggle-switches

Last synced: about 2 months ago
JSON representation

Simple class switcher on web elements. JavaScript only.

Host: GitHub
URL: https://github.com/rah-emil/easy-toggler
Owner: rah-emil
License: mit
Created: 2020-07-31T08:33:55.000Z (over 4 years ago)
Default Branch: master
Last Pushed: 2023-07-19T19:41:41.000Z (over 1 year ago)
Last Synced: 2024-03-14T18:18:51.829Z (10 months ago)
Topics: class, dropdown, easy-toggle, easy-toggler, js-lib, tabs, toggle, toggle-class, toggle-class-javascript, toggle-switches
Language: JavaScript
Homepage: https://rah-emil.ru/easy-toggler
Size: 2.08 MB
Stars: 40
Watchers: 2
Forks: 14
Open Issues: 2
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

        # EasyToggler.js 🔗🚀

![npm bundle size](https://img.shields.io/bundlephobia/min/easy-toggler)

![YouTube Channel Subscribers](https://img.shields.io/youtube/channel/subscribers/UCj5-dlnKYZ7O2HIYgP8urqw?style=flat)

[![](https://data.jsdelivr.com/v1/package/npm/easy-toggler/badge?style=rounded)](https://www.jsdelivr.com/package/npm/easy-toggler)

![npm](https://img.shields.io/npm/dm/easy-toggler)

![GitHub](https://img.shields.io/github/license/rah-emil/easy-toggler)

![GitHub issues](https://img.shields.io/github/issues/rah-emil/easy-toggler)

Simple class switcher on web elements. JavaScript only.

![](readme/mem.png)

## Use a plugin instead of JavaScript

```html

Toggle class

Add class

Remove class

Removing a class if we click on an empty space

```

## Import EasyToggler

### ES

```html

  import easySetup from "easy-toggler";

  easySetup({

    // html attrs

    toggle: 'easy-toggle',

    add: 'easy-add',

    remove: 'easy-remove',

    class: 'easy-class',

    rcoe: 'easy-rcoe',

    parallel: 'easy-parallel',

    self: 'easy-self',

    selfRcoe: 'easy-self-rcoe',

    // Hooks

    onToggle($el){},

    onAdd($el){},

    onRemove($el){},

    onRcoe($el){},

  });

```

or easier:

```html

  import easySetup from "easy-toggler";

  easySetup();

```

### CDN jsDelivr (iife)

```html

```

### CJS

```html

  const easySetup = require("easy-toggler");

  easySetup({

    // html attrs

    toggle: 'easy-toggle',

    add: 'easy-add',

    remove: 'easy-remove',

    class: 'easy-class',

    rcoe: 'easy-rcoe',

    parallel: 'easy-parallel',

    self: 'easy-self',

    selfRcoe: 'easy-self-rcoe',

    // Hooks

    onToggle($el){},

    onAdd($el){},

    onRemove($el){},

    onRcoe($el){},

  });

```

or easier:

```html

  const easySetup = require("easy-toggler");

  easySetup();

```

## Demo

Visit demo page: [rah-emil.ru/easy-toggler](https://rah-emil.ru/easy-toggler)

### Example №1

When you click the button, the class ```show``` will be added to ``````

```html

Menu

    


        Home

        About us

        Services

        Portfolio

        Contact us

    


```

### Example №2

When you click the button, the class  ```open``` will be added to ```
```. When clicking outside the element area, class ```open``` will be deleted from ``````, since we specified the  ```easy-rcoe``` attribute for the link.

```html



    Categories

    


        HTML

        CSS

        JavaScript

        Vue.js

        Laravel

    



```

**EasyToggler.js** only allows you to conveniently manage the element classes. CSS styles (behavior of elements with certain classes) must be specified independently.

## Attributes

- **easy-toggle** - toggle class for target element

- **easy-add** - add class for target element

- **easy-remove** - remove class for target element

- **easy-class** - specifying the class for the target element

- **easy-rcoe** - indicate whether it is necessary to delete the class if another is pressed

- **easy-parallel** - so that elements can open parallel to each other

- **easy-self** - add a class to the clicked button

- **easy-self-rcoe** - indicate whether it is necessary to delete the class if another is pressed (for self elements)

## Hooks

- **onToggle($el)** - hook after action toggle

- **onAdd($el)** - hook after action add

- **onRemove($el)** - hook after action remove

- **onRcoe($el)** - hook after action rcoe