Create Nested Accordion & Content Toggle UI With JavaScript – handy-collapse.js

Preview:

Description:

handy-collapse.js is a small vanilla JavaScript plugin used for creating nested accordion and/or content toggle interfaces with smooth slide up/down effects.

How to use 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 done. This will only open one panel at a time

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

To create a content toggle interface (open multiple panels at a time) just 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 functions which will 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])

Changelog:

v1.1.0 (10/11/2021)

• update dependencies

v1.0.4 (05/08/2021)

• fix: Radio button being unchecked when collapsed
• feat: a11y support

v1.0.1 (12/23/2019)

• Update

v1.0.0 (06/01/2019)

• Change: method , propaty name

v0.1.4 (01/07/2019)

• Updated

v0.1.2 (11/14/2018)

• Fix typo in options
• Fix samples

v0.1.1 (10/11/2018)

• bugfix

v0.1.0 (10/09/2018)

• Remove Style `overflow:hidden` on Opened , Allow multiple buttons