Class Toggler

Class toggler is a simple data attributes based class toggler plugin.

Class toggling is one of the most useful things in a frontend world, it can help you create simple dynamic UI elements with ease.

Basic usage instructions:

Add classToggler instance to your page:

1. Include classToggler.js file from our CDN in the end of your document;
2. Initialize the plugin with.

<script src="https://honeycomb.flixbus.com/dist/{VERSION_TAG}/js/classToggler.js"></script>
<script>
  document.addEventListener(&quot;DOMContentLoaded&quot;, function() {
    tooltip.init();
  });
</script>

On a toggle element specify the [data-toggle="<THE_TARGET_CLASS_NAME>"] attribute that points to a target element to toggle.

Specify the class name to be toggled on the target element with a [data-toggle-class="<CLASS_NAME>"] attribute.

<div class="flix-box toggle-me">
  <button type="button" class="flix-btn" data-toggle="toggle-me" data-toggle-class="flix-box--highlighted">
    Toggle
  </button>
</div>

If you need to toggle a class on the source (e.g. --active modifier) use [data-toggle-self="<CLASS_NAME>"] attribute.

<button type="button" class="flix-btn" data-toggle-self="flix-btn--primary">
  Toggle
</button>

If you want the toggle to last for a specified amount of time you can use the [data-toggle-timeout="<TIME_IN_MS>"] attribute.

<button type="button" class="flix-btn" data-toggle-self="flix-btn--loading" data-toggle-timeout="2000">
  Toggle
</button>

By default plugins responds to a "click" event and toggles specified class on a specified target element.