Simple Javascript Plugin for Toggling Element | toggler

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


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

    // 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
var content = document.getElementById('test-content');
var button = document.getElementById('test-button');
var toggler = new Toggler(content);;
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

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 class="js-toggler" id="2">
  content here

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
<a href="#" data-toggler="toggle" data-toggler-target="#2" data-toggler-collection="#accordion">Accordion 2</a>
<div class="js-toggler" id="2">
  content here

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 class="js-toggler" id="2">
  content here

8. All options are default.

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

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.

Related Posts


Responsive Drag and Drop File Uploader/Download Plugin | 5x5_jq_uploader

5x5_jq_uploader plugin can be used to instantly create a drop file area and file queue with a little bit of preparation. Bootstrap is used for responsive planning…


Stylesheet For Implementing Dark Mode with Bootstrap

Bootstrap Dark Mode provides a style sheet and two texts that allow you to implement Dark Mode on your website. Initially loaded based on user preferences, can…


Multi-purpose Navigation Menu for Javascript Library | jQuery Corenav

coreNavigation is a multipurpose navigation menu for a jquery based javascript library, comes with more style, and is easy to integrate. 11 Default Menu 2 Responsive Navigation…


Simple Multi-Select Dropdown Pure Vanilla Javascript | multiSelect.js

MultiSelect.js is a simple, clean, and progressive JavaScript library designed for easy integration with any type of project or system. The design was heavily influenced by the…


Confetti Falling Animation Effect In JavaScript | party.js

Party.js is a JavaScript library to brighten user site experience with visual effects! Celebrate success with dom confetti! The library is written in TypeScript and compiled into…


How To Create A Popup in HTML with CSS

How to create popup in html with css – Popup without JavaScript is an elegant pop-up panel component with an animated scale, written in CSS. Have you…