Smooth Content Toggle Plugin In Pure JavaScript – collapsible.js

Preview:

Description:

collapsible.js is a dependency-free content toggle JavaScript plugin to smoothly collapse & expand content panels just like Accordion.

How to use it:

To get started, insert the collapsible.js script into the document.

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

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>

Activate the collapsible.js.

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

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

Assign the state of the node element.

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

Assign a MutationObserver to observe child DOM changes.

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

Callback functions available.

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