npm:classtoggler

README

A simple css class toggler for all kind of dropdowns, accordions, menus, optional form collapsing elements also with a grouping option.

Demo

check out the DEMO

Usage

Import & initiate

1. npm i classtoggler
2. import { classtoggler, classtogglerRemoveClassByGroup, classtogglerUpdate, classtogglerForm } from 'classtoggler';
3. classtoggler();
4. if you need to close the group use: classtogglerRemoveClassByGroup('your-group-name');
5. if you need to update the classtoggler use classtogglerUpdate();
6. if you need the form control use classtogglerForm('#unique-form-selector')

Markup Options

data-toggler-target - target the element
data-toggler-class - define the css class name
data-toggler-group - define the group
data-toggler-form-target - use for targeting elements via radio & checkbox inputs

Default active classes

   <a href="#" data-toggler-target="#sub-menu">Item 1</a>
   <ul class="sub-menu" id="sub-menu">
      <li><a href="#">Sub-item 1</a></li>
      <li><a href="#">Sub-item 2</a></li>
      <li><a href="#">Sub-item 3</a></li>
   </ul>

Custom css class

   <a href="#" data-toggler-target="#sub-menu" data-toggler-class="test-class">Item 1</a>
   <ul class="sub-menu" id="sub-menu">
      <li><a href="#">Sub-item 1</a></li>
      <li><a href="#">Sub-item 2</a></li>
      <li><a href="#">Sub-item 3</a></li>
   </ul>

Grouping

the grouped elements will be holding the active css class only one at the time. (good for dropdowns, accordions..)

   <ul>
      <li>
         <a href="#" data-toggler-target="#sub-menu-1" data-toggler-group="navigation">Item 1</a>
         <ul class="sub-menu" id="sub-menu-1">
            <li><a href="#">Sub-item 1</a></li>
            <li><a href="#">Sub-item 2</a></li>
            <li><a href="#">Sub-item 3</a></li>
         </ul>
      </li>
      <li>
        <a href="#" data-toggler-target="#sub-menu-2" data-toggler-group="navigation">Item 2</a>
        <ul class="sub-menu" id="sub-menu-2">
            <li><a href="#">Sub-item 1</a></li>
            <li><a href="#">Sub-item 2</a></li>
            <li><a href="#">Sub-item 3</a></li>
         </ul>
    </li>
   </ul>

Chaining

One element controlling two (or more) containers


   <p class="text-center">
      <a class="btn" href="#" data-toggler-target="#section-1, #section-4">Red</a>
      <a class="btn btn-blue" href="#" data-toggler-target="#section-2, #section-3">Blue</a>
   </p>
   <div class="row">
      <div id="section-1" class="col-md-6 collapse active">
         <div class="card red">
            <h2>Red</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
         </div>
      </div>
      <div id="section-2" class="col-md-6 collapse active">
         <div class="card blue">
            <h2>Blue</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
         </div>
      </div>
      <div id="section-3" class="col-md-6 collapse active">
         <div class="card blue">
            <h2>Blue</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
         </div>
      </div>
      <div id="section-4" class="col-md-6 collapse active">
         <div class="card red">
            <h2>Red</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
         </div>
      </div>
   </div>

Chaining classes

   <p>
      <a href="#" class="btn btn-blue" data-toggler-target="#my-button" data-toggler-class="btn, btn-blue">Toggle classes</a>
   </p>
   <p>
      <a href="#" id="my-button">My button</a>
   </p>

Remove Class by a group name

Great for closing menus, dropdowns etc.. on a custom event.

Imagine the following scenario: You opened a navigation via the classtoggler. Without closing it, you start interacting with the content. F.ex. you clicked on a button somewhere in the text. You expect the menu to get closed automaticaly.

   <ul>
      <li>
         <a href="#" data-toggler-target="#sub-menu-1" data-toggler-group="navigation">Item 1</a>
         <ul class="sub-menu" id="sub-menu-1">
            <li><a href="#">Sub-item 1</a></li>
            <li><a href="#">Sub-item 2</a></li>
            <li><a href="#">Sub-item 3</a></li>
         </ul>
      </li>
      <li>
         <a href="#" data-toggler-target="#sub-menu-2" data-toggler-group="navigation">Item 2</a>
         <ul class="sub-menu" id="sub-menu-2">
            <li><a href="#">Sub-item 1</a></li>
            <li><a href="#">Sub-item 2</a></li>
            <li><a href="#">Sub-item 3</a></li>
         </ul>
      </li>
   </ul>


   classtogglerRemoveClassByGroup('navigation');

Update the classtoggler after dynamic elements were added to the DOM


   classtogglerUpdate();

Control the visibility of optional form elements


   classtogglerForm('#test-form');

Usage no npm install needed!