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

Category: Accordion , Javascript | October 11, 2022
Author:sk-rt
Views Total:903 views
Official Page:Go to website
Last Update:October 11, 2022
License:MIT

Preview:

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

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

You Might Be Interested In:


One thought on “Create Nested Accordion & Content Toggle UI With JavaScript – handy-collapse.js

  1. Vik K

    Hello,

    Can a parent in the nested accordion have more than one child?

    For example:

    Content01
    — ChildContent01
    — ChildContent02

    I will appreciate it if you could answer this query.

    Thanks!
    Vik K.

    Reply

Leave a Reply