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.