Smooth Content Toggle Plugin In Pure JavaScript – collapsible.js

Category: Accordion , Javascript | August 13, 2018
Author: doubtingreality
Views Total: 479
Official Page: Go to website
Last Update: August 13, 2018
License: MIT

Preview:

Smooth Content Toggle Plugin In Pure JavaScript – collapsible.js

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

You Might Be Interested In:

Leave a Reply