A Pure Javascript Module for Accordion/Collapse UI | handy-collaps.js

handy-collaps.js is a pure JavaScript module for the accordion/collapse UI without the JQuery plugin used to create accordion switching interfaces and/or nested content with smooth sliding up / down effects.

jquery accordion, simple jquery accordion, javascript accordion, jquery accordion collapse all, accordion jquery examples with source code, accordion jquery

How to make use of 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 complete.

let nested = new HandyCollapse({
    nameSpace: "nested"

To create a content toggle interface (open a number of panels at a time) simply 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 features that can be fired after the slide animation starts/ends.

let nested = new HandyCollapse({
    onSlideStart: () => false,
    onSlideEnd: () => false

Toggle the content programmatically.


Create Nested Accordion & Content Toggle, handy-collaps.js Plugin/Github, nested accordion with plus-minus, nested accordion example, nested accordion jquery

See Demo And Download

Official Website(sk-rt): Click Here

This superior jQuery/javascript plugin is developed by sk-rt. For extra Advanced Usages, please go to the official website.

Related Posts


Simple And Powerful Fullscreen Lightbox Plugin | fslightbox

Fullscreen Lightbox Basic is a modern and handy plug-in for displaying photos and videos in a clean overlay box. Showcase a single source or create a great…


Product Thumbnail Slider With Positive Zoom Effect jQuery

Positive Zoom is a JavaScript library for creating an image gallery where you can zoom in on the current image by hovering over it. Must Read: Pure…


Create Responsive Gauge Meter Using Pure CSS | CSSGauge

Pure CSS Gauge Meter Component, no SVG, or artboard is used in this component. This component can be easily distinguished by overriding the default style rules and…


Versatile Date and Time Picker Calendar for Bulma

Bulma extension for calendar display can be used on a page as a large calendar with appointments or as a date picker/popup window. A responsive, customizable, and…


Simple Time-Series Chart Viewer with HTML5 Canvas Javascript Library

Pixl chart library displays time series charts in the browser, using the HTML5 Canvas element. It is designed to be lightweight and efficient, while still providing a…


Neumorphic Design Inspiration Style CSS Shapes | Neumorphism

Multi-dimensional design is inspired by the physical world and adds textures, reflection, shadows, layers, and depths to the flat design making the UI elements more visible. CSS…