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

Category: Accordion , Javascript | January 7, 2019
Author: sk-rt
Views Total: 1,174
Official Page: Go to website
Last Update: January 7, 2019
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
});

Changelog:

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