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

Category: Accordion , Javascript | June 1, 2019
Author: sk-rt
Views Total: 1,529
Official Page: Go to website
Last Update: June 1, 2019
License: MIT


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


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

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

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.,[isRunCallback,isAnimation])


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

You Might Be Interested In:

Leave a Reply