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: 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 (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2023-07-19T19:41:41.000Z (almost 2 years ago)
• Last Synced: 2025-01-13T16:15:09.177Z (5 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: 44
• 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