easy-toggler

EasyToggler.js 🔗🚀

Simple class switcher on web elements. JavaScript only.

Import EasyToggler

ES

<script type="module">
  import easySetup from "easy-toggler";

  easySetup({
      toggle: 'easy-toggle',
      remove: 'easy-remove',
      add: 'easy-add',
      class: 'easy-class',
      rcoe: 'easy-rcoe',
      parallel: 'easy-parallel',
  });
</script>

UMD (+ jsDelivr)

<script src="https://www.jsdelivr.com/package/npm/easy-toggler/dist/easy-toggler.min.js"></script>

CJS

<script type="module">
  const easySetup = require("easy-toggler.cjs");

  easySetup({
      toggle: 'easy-toggle',
      remove: 'easy-remove',
      add: 'easy-add',
      class: 'easy-class',
      rcoe: 'easy-rcoe',
      parallel: 'easy-parallel',
  });
</script>

Example №1

When you click the button, the class show will be added to <nav id="main_menu">

<button data-easy-toggle="#main_menu" data-easy-class="show">Menu</button>

<nav id="main_menu">
    <ul>
        <li><a>Home</a></li>
        <li><a>About us</a></li>
        <li><a>Services</a></li>
        <li><a>Portfolio</a></li>
        <li><a>Contact us</a></li>
    </ul>
</nav>

Example №2

When you click the button, the class open will be added to <div id="categories" class="dropdown-menu">. When clicking outside the element area, class open will be deleted from <div id="categories" class="dropdown-menu">, since we specified the data-easy-rcoe attribute for the link.

<div class="dropdown">
    <a href="#" data-easy-toggle="#categories" data-easy-class="open" data-easy-rcoe>Categories</a>

    <div id="categories" class="dropdown-menu">
        <a href="#">HTML</a>
        <a href="#">CSS</a>
        <a href="#">JavaScript</a>
        <a href="#">Vue.js</a>
        <a href="#">Laravel</a>
    </div>
</div>

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

Specificity of 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

Changelog

2.0.0 (2022-06-16)

Closed issues:

• fix "Don't work remove class after added data-easy-parallel #3"

Implemented enhancements:

• code refactoring
• add easy-add
• add easy-remove