Toggle CSS Class for the Element By Clicking on Another Element

A simple JavaScript library to toggle the CSS class of an element by clicking on another element (s). Switching is controlled via data attributes.

Suitable for creating show/hide, more/less, tabs, accordions, dropdowns, or conditional components without writing JavaScript code, all done in your HTML template.

How to make use of it:

1. Link to the Class Toggler library.

<script defer src="js/class-toggler.min.js"></script>

2. Initialize the Class Toggler and we’re ready to go.

document.addEventListener('DOMContentLoaded', () => {
  classToggler.init();
});

3. Add the ‘-hidden-toggle’ class to the component to be hidden.

<div class="-hidden-toggle" data-toggle-name="toggle-name">
  Element to be toggled
</div>

4. Create a trigger component to toggle the component.

<button data-toggle-target="toggle-name">
  Toggle The Element
</button>

5. Override the default CSS classes to be toggled.

classToggler.init({
  classActive: '-active-toggle',
  classHidden: '-hidden-toggle'
});

6. Or by way of HTML information attributes:

<div data-toggle-name="toggle-name" data-toggle-class="text--hidden">
  Element to be toggled
</div>

<button data-toggle-target="toggle-name" data-toggle-class="button--active">
  Toggle The Element
</button>

7. Create a tabs component using the data-toggle-tabs attribute:

<div class="Tabs">
  <!-- Tabs buttons -->
  <ul class="Tabs__buttons">
    <li class="Tabs__buttons-li">
      <a
        class="Tabs__buttons-link Tabs__buttons-link--active"
        data-toggle-target="tab-1"
        data-toggle-class="Tabs__buttons-link--active"
        data-toggle-tabs="tabs"
        href="#tab-1"
        >Tab one</a
      >
    </li>
    <li class="Tabs__buttons-li">
      <a
        class="Tabs__buttons-link"
        data-toggle-target="tab-2"
        data-toggle-class="Tabs__buttons-link--active"
        data-toggle-tabs="tabs"
        href="#tab-2"
        >Tab two</a
      >
    </li>
  </ul>
  <!-- Tabs contents -->
  <div
    class="Tabs__content"
    data-toggle-name="tab-1"
    data-toggle-class="Tabs__content--hidden"
    id="tab-1"
  >
    <p>
      Content of the first tab. Integer porttitor odio nibh. In non dolor sed est molestie feugiat at eu risus. Duis orci dui, viverra id suscipit sed, posuere non ante. Curabitur ac tellus non velit dictum aliquet in eu orci.
    </p>
  </div>
  <div
    class="Tabs__content Tabs__content--hidden"
    data-toggle-name="tab-2"
    data-toggle-class="Tabs__content--hidden"
    id="tab-2"
  >
    <p>
      Content of the second tab. Lorem ipsum dolor sit amet, consectetur ipiscing elit. Fusce malesuada magna nec justo placerat egestas. Integer porttitor odio nibh. In non dolor sed est molestie feugiat at eu risus. Duis orci dui, viverra id suscipit sed, posuere non ante. Curabitur ac tellus non velit dictum aliquet in eu orci.
    </p>
  </div>
</div>

Toggle CSS Class Of An Element, javascript toggle class onclick, Class Toggler Plugin/Github