Basic Accordion & Content Toggle JS Library – Houdini

Houdini is a vanilla JavaScript plugin allows to toggle the visibility of block content with URL hashtag (deep link) support.

How to use it:

Import the Houdini’s files (JavaScript and Stylesheet) into the page.

<!-- stylesheets -->
<link rel="stylesheet" href="dist/css/houdini.css">
<!-- Javascript -->
<script src="dist/js/houdini.js"></script>

Initialize the Houdini library and we’re ready to go.

houdini.init();

Create a basic content toggle widget.

<a class="collapse-toggle" data-collapse href="#show-me">
  <span class="collapse-text-show">Show +</span>
  <span class="collapse-text-hide">Hide -</span>
</a>
<div class="collapse" id="show-me">
  Target content
</div>

Create a basic accordion widget that supports multiple content blocks and only one block should be visible at a time.

<a class="collapse-toggle active" data-collapse data-group="accordion" href="#section1">
  Section 1
  <span class="collapse-text-show">+</span>
  <span class="collapse-text-hide">-</span>
</a>
<div class="collapse active" id="section1">
  Section 1 Content
</div>
<a class="collapse-toggle active" data-collapse data-group="accordion" href="#section2">
  Section 2
  <span class="collapse-text-show">+</span>
  <span class="collapse-text-hide">-</span>
</a>
<div class="collapse active" id="section2">
  Section 2 Content
</div>
<a class="collapse-toggle active" data-collapse data-group="accordion" href="#section3">
  Section 3
  <span class="collapse-text-show">+</span>
  <span class="collapse-text-hide">-</span>
</a>
<div class="collapse active" id="section3">
  Section 3 Content
</div>
...

Default settings.

houdini.init({
  selectorToggle: '[data-collapse]',
  selectorContent: '.collapse',
  toggleActiveClass: 'active',
  contentActiveClass: 'active',
  initClass: 'js-houdini',
  stopVideo: true
});

Callback functions that will be triggered when the content is shown or hidden.

houdini.init({
  callbackOpen: function () {},
  callbackClose: function () {}
});