Create Nested Accordion & Content Toggle UI With JavaScript – handy-collapse.js
This 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.

Demo Here
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.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