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

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.

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.

  • Publication date: 23.02.2018
  • Source