Versatile Content Toggle Plugin With Pure JavaScript – toggler.js

Category: Javascript | December 15, 2017
Author: deivydasv
Views Total: 654
Official Page: Go to website
Last Update: December 15, 2017
License: MIT

Preview:

Versatile Content Toggle Plugin With Pure JavaScript – toggler.js

Description:

toggler.js is a multifunctional JavaScript content toggle plugin used to show and hide specific block elements with slide or fade animations.

Features:

  • Easy to implement using data attributes and CSS classes.
  • Allows to toggle multiple elements at a time. Ideal for accordions.
  • Allows to show a specific element on init.

Basic usage:

Import the toggler.css and toggler.js into your html file.

<link rel="stylesheet" href="css/toggler.css">
<script src="js/toggler.js"></script>

Initialize the toggler plugin and we’re ready to go.

Toggler.Init({
    // options here
});

Enable a toggle button to show/hide your element on click.

<a id="test-button">Test</a>
<div id="test-content">
  content here
</div>
var content = document.getElementById('test-content');
var button = document.getElementById('test-button');

var toggler = new Toggler(content);
toggler.show();

button.addEventListener('click', function (_) {
  return toggler.toggle();
});

You can also implement the toggler plugin via data attributes:

<a data-toggler="toggle" href="#demo">Toggle</a>
<a data-toggler="show" href="#demo">Show</a>
<a data-toggler="hide" href="#demo">Hide</a>

<div class="js-toggler" id="demo">
  content here
</div>

Enable a toggle element to show/hide multiple elements.

<a data-toggler="toggle" data-toggler-target="#1, #demo2" href="#">Toggle</a>

<div class="js-toggler" id="1">
  content here
</div>
<div class="js-toggler" id="2">
  content here
</div>

Create an accordion with this plugin.

<a href="#" data-toggler="toggle" data-toggler-target="#1" data-toggler-collection="#accordion">Accordion 1</a>

<div class="js-toggler is-visible" id="1">
  content here
</div>

<a href="#" data-toggler="toggle" data-toggler-target="#2" data-toggler-collection="#accordion">Accordion 2</a>

<div class="js-toggler" id="2">
  content here
</div>

...

Create a tabs interface with this plugin.

<a href="#1" data-toggler="tabs" data-toggler-collection="#tabs">Tab 1</a>
<a href="#2" data-toggler="tabs" data-toggler-collection="#tabs">Tab 2</a>

<div class="js-toggler is-visible" id="1">
  content here
</div>

<div class="js-toggler" id="2">
  content here
</div>

All default options.

Toggler.Init({

  CLASS_BASE: 'js-toggler',

  CLASS_VISIBLE: 'is-visible',

  CLASS_TARGET_VISIBLE: 'is-target-visible',

  CLASS_TRANSITIONING: 'is-transitioning',

  CLASS_FADE: 'is-fade',

  CLASS_SLIDEFADE: 'is-slidefade',

  DELEGATE_CLICK: false

});

You Might Be Interested In:

Leave a Reply