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.

4.5/5.0
Last updated 09 September, 2022
By Admin

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>

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
});

I hope it can help you...

Jquery Plugin

Accordion

Create Content Accordion Using Pure JavaScript Plugin - Collapsible.js

Categories