Basic Accordion & Content Toggle JS Library – Houdini

Category: Accordion , Javascript | February 12, 2018
Views Total:631 views
Official Page:Go to website
Last Update:February 12, 2018


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.


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>
<div class="collapse" id="show-me">
  Target content

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>
<div class="collapse active" id="section1">
  Section 1 Content
<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>
<div class="collapse active" id="section2">
  Section 2 Content
<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>
<div class="collapse active" id="section3">
  Section 3 Content

Default settings.

  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.

  callbackOpen: function () {},
  callbackClose: function () {}

You Might Be Interested In:

Leave a Reply