toggler.js is a simple toggle element javascript plugin (suitable for accordions or tabs) used to show and hide certain block elements using a slide or fade animations.

javascript dynamic tabs, data toggletab, set active tab javascript, javascript tabs, how to get active tab id in javascript

Features:

• Easy to implement with data themes and CSS classes.
• Allows switching of multiple items simultaneously. Perfect for accordion.
• Allows showing a specific element in init.

How to make use of it:

1. Import toggler.css and toggler.js in your HTML file.

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

2. Configure the toggler plug-in.

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

3. Enable the toggle to show/hide your item 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();
});

4. 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>

5. Enable toggle item to show/hide multiple items.

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

6. 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>
...

7. Create 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>

8. All options are default.

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
});

versatile content toggle Plugin/Github

See Demo And Download

Official Website(deivydasv): Click Here

This superior jQuery/javascript plugin is developed by deivydasv. For extra advanced usage, please go to the official website.