Create Content Accordion Using Pure JavaScript Plugin– collapsible.js

Today I am going to share awesome jQuery Plugin collapsible.js which is a dependency-free content toggle JavaScript plugin to smoothly collapse & expand content panels just like Accordion. It is helpful creating simple content based dynamic Accordion feature for your website.


Libraries

Load plugin library collapsible.js on page.

<script src="collapsible.js"></script>

HTML

Create collapsible and expandable content panels with the ‘data-collapsible’ attribute

<div class="block" data-collapsible>
  <div class="block__title"><h3>Panel 1</h3></div>
  <div class="block__content">
    <p>Content 1</p>
  </div>
</div>
 
<div class="block" data-collapsible>
  <div class="block__title"><h3>Panel 2</h3></div>
  <div class="block__content">
    <p>Content 2</p>
  </div>
</div>
 
<div class="block" data-collapsible>
  <div class="block__title"><h3>Panel 3</h3></div>
  <div class="block__content">
    <p>Content 3</p>
  </div>
</div>



JS

Call the plugin’s methods on page to enable content based Accordion.

new Collapsible({
    node: document.querySelectorAll('.block'),
    eventNode: '.block__title'
});

Where:

  • node: The HTML elements that will be manipulated.
  • eventNode: The HTML element on which the eventListener will be attached.

Assign the state of the node element and Assign a MutationObserver to observe child DOM changes.

new Collapsible({
    node: document.querySelectorAll('.block'),
    eventNode: '.block__title',
    isCollapsed: false,
    observe: true
});

See live demo and download source code.

DEMO | DOWNLOAD

This awesome plugin is developed by mmousawy. Visit their official github repository for more information and follow for future updates.