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 1h3>div>
  <div class="block__content">
    <p>Content 1p>
  div>
div>
 
<div class="block" data-collapsible>
  <div class="block__title"><h3>Panel 2h3>div>
  <div class="block__content">
    <p>Content 2p>
  div>
div>
 
<div class="block" data-collapsible>
  <div class="block__title"><h3>Panel 3h3>div>
  <div class="block__content">
    <p>Content 3p>
  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.

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

Related