Create Content Accordion Using Pure JavaScript Plugin– collapsible.js

by

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.

HTML

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


  
Panel 1

  

    
Content 1

  






  
Panel 2

  

    
Content 2

  






  
Panel 3

  

    
Content 3



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.


Published by Rohit