jQuery Plugin To Manage Hiding And Showing Of Elements - Toggle.js

Toggle.js is a very small jQuery accordion & content toggle plugin which allows you to toggle the visibility of specific block elements using CSS classes and HTML data attributes.

How to use it:

1. Add references to jQuery library and the jQuery toggle.js plugin's files.

<link rel="stylesheet" href="css/jquery.toggle.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous">
</script>
<script src="js/jquery.toggle.min.js"></script>

2. By default, an element with the class js-toggle toggles its first sibling with class js-toggle-panel as follows:

<a href="#" class="js-toggle js-toggle--is-expanded">Toggle sibling</a>

<div class="js-toggle-panel js-toggle-panel--is-expanded">
  I'm the first sibling panel; I wil get toggled
</div>
<div class="js-toggle-panel js-toggle-panel--is-expanded">
  I'm the second sibling panel; I won't get toggled
</div>

3. You can also use the plugin to toggle any block elements within the document using HTML data attribute:

<a href="#" class="js-toggle js-toggle--is-expanded" data-toggle-panel-id="1">
  Toggle ID 1
</a>

<div class="js-toggle-panel js-toggle-panel--is-expanded" data-toggle-panel-id="1">
  Panel with data-toggle-panel-id="1"
</div>

4. To create an accordion interface that only expand one block element at a time, follow these steps:

<a href="#" class="js-toggle js-toggle--is-expanded" data-toggle-group="my-toggle-group" data-toggle-panel-id="1.1">
  Toggle group - #1</a>
<div class="js-toggle-panel js-toggle-panel--is-expanded" data-toggle-panel-id="1.1">
  Toggle group panel #1
</div>

<a href="#" class="js-toggle js-toggle--is-expanded" data-toggle-group="my-toggle-group" data-toggle-panel-id="1.2">
  Toggle group - #2</a>
<div class="js-toggle-panel js-toggle-panel--is-expanded" data-toggle-panel-id="1.2">
  Toggle group panel #2
</div>

<a href="#" class="js-toggle js-toggle--is-expanded" data-toggle-group="my-toggle-group" data-toggle-panel-id="1.3">
  Toggle group - #3</a>
<div class="js-toggle-panel js-toggle-panel--is-expanded" data-toggle-panel-id="1.3">
  Toggle group panel #3
</div>

...

---

This awesome jQuery plugin is developed by jaronbarends. For more Advanced Usages, please check the demo page or visit the official website.