A Pure Javascript Module for Accordion/Collapse UI

handy-collaps.js is a pure JavaScript module for the accordion/collapse UI without the JQuery plugin used to create accordion switching interfaces and/or nested content with smooth sliding up / down effects.

jquery accordion, simple jquery accordion, javascript accordion, jquery accordion collapse all, accordion jquery examples with source code, accordion jquery

How to make use of it:

Download and import the handy-collapse.js script into the HTML.

<script src="/dist/handy-collapse.js"></script>

Create toggle buttons and togglable content on the webpage.

<button type="button" data-nested-control="content-example">
  Toggle Content
</button>

<div data-nested-content="content-example">
  <div class="box">
    Content Here
    <button type="button" data-nested-control="child-example">
      Toggle Child Content
    </button>
    <div data-nested-content="child-example">
      <div class="box">
        <p>
          Child Content Here
        </p>
      </div>
    </div>
  </div>
</div>

Initialize the handy-collaps.js and complete.

let nested = new HandyCollapse({
    nameSpace: "nested"
});

To create a content toggle interface (open a number of panels at a time) simply set the ‘closeOthers’ to ‘false’.

let nested = new HandyCollapse({
    nameSpace: "nested",
    closeOthers: false
});

More configuration options with default values.

let nested = new HandyCollapse({
    nameSpace: "hc",
    toggleButtonAttr: `data-${options.nameSpace || "hc"}-control`,
    toggleContentAttr: `data-${options.nameSpace || "hc"}-content`,
    activeClass: "is-active",
    isAimation: true,
    animatinSpeed: 400,
    cssEasing: "ease-in-out"
});

Callback features that can be fired after the slide animation starts/ends.

let nested = new HandyCollapse({
    onSlideStart: () => false,
    onSlideEnd: () => false
});

Toggle the content programmatically.

handyCollapse.open(contentID,[isRunCallback,isAnimation])
handyCollapse.close(contentID,[isRunCallback,isAnimation])

Create Nested Accordion & Content Toggle, handy-collaps.js Plugin/Github, nested accordion with plus-minus, nested accordion example, nested accordion jquery