handy-collaps.js
A pure Javascript module for accordion/collapse UI without jQuery.
> examples
Usage
Install
Using npm or yarn, install handy-collapse
> npm
npm install handy-collapseyarn add handy-collapseImport
import HandyCollapse from "handy-collapse";Initialize
new HandyCollapse(options);Markup
Minimum markup
<!--
Add data attribute, button/content element.
Control Button: data-{namespase}-control="{ID}" * multiple elements
Toggle Content: data-{namespase}-content="{ID}" * only one element
-->
<button type="button" data-hc-control="uniqID">Show/Hide Content</button>
<div data-hc-content="uniqID">Toggle Content</div>With aria-* attribute for accessibility
<button type="button" data-hc-control="uniqID" aria-expanded="false" aria-controls="contentID">
Show/Hide Content
</button>
<div id="contentID" data-hc-content="uniqID" aria-hidden="true">Toggle Content</div>Options
| Option Name | Type | Default | Desc |
|---|---|---|---|
| nameSpace | string | "hc" | Set namespace both "toggleButtonAttr" & "toggleContentAttr" |
| toggleButtonAttr | string | "data-hc-control" | data attribute for Button Element |
| toggleContentAttr | string | "data-hc-content" | data attribute for Content Element |
| activeClass | string | "is-active" | Add class on opened Element |
| isAnimation | boolean | true | animation Slide |
| closeOthers | boolean | true | Close others Content |
| animationSpeed | number | 400 | css transition duration(ms) |
| cssEasing | string | "ease-in-out" | css transition easing (only isAnimation:true) |
| onSlideStart | (isOpen:boolean,contentID:string)=> void | () => void | Callback on Open/Close Animation Start @param {Boolean} isOpen @param {String} contentID * Don't ID Attribute |
| onSlideEnd | (isOpen:boolean,contentID:string)=> void | () => void | Callback on Open/Close Animation End @param {Boolean} isOpen @param {String} contentID * Don't ID Attribute |
Methods
Open/Close Content
handyCollapse.open(contentID, [isRunCallback, isAnimation]);handyCollapse.close(contentID, [isRunCallback, isAnimation]);Sample
JS
//Default Options
const myAccrodion = new HandyCollapse();
//Full Options
const myAccrodionCustom = new HandyCollapse({
nameSpace: "hc", // Note: Be sure to set different names when creating multiple instances
activeClass: "is-active",
isAnimation: true,
closeOthers: true,
animationSpeed: 400,
cssEasing: "ease",
onSlideStart: (isOpen, contentID) => {
console.log(isOpen);
const buttonEl = document.querySelectorAll(`[data-hc-control='${contentID}']`);
console.log(buttonEl);
},
onSlideEnd: (isOpen, contentID) => {
console.log(isOpen);
const contentEl = document.querySelector(`[data-hc-content='${contentID}']`);
console.log(contentEl);
}
});
// Open by Js
myAccrodion.open("content01");
// Close by Js
myAccrodion.close("content01");HTML
<!--
BUTTON : data-{namespase}-control="{ID}" * multiple element
CONTENT: data-{namespase}-content="{ID}" * only one element
-->
<!-- basic -->
<button type="button" data-hc-control="content01" aria-expanded="false" aria-controls="basicContent01">
Show/Hide Content 01
</button>
<div id="basicContent01" data-hc-content="content01" aria-hidden="true">... Content 01 ...</div>
<!-- if add activeClass(def: "is-active"), Opened on init. -->
<button
type="button"
class="is-active"
data-hc-control="content02"
aria-expanded="true"
aria-controls="basicContent02"
>
Show/Hide Content 02
</button>
<div id="basicContent02" class="is-active" data-hc-content="content02" aria-hidden="false">... Content 02 ...</div>
<!-- can use nested accordion -->
<button type="button" data-hc-control="parentContent" aria-expanded="true" aria-controls="netstedParantContent">
Show/Hide parent content
</button>
<div id="netstedParantContent" data-hc-content="parentContent" aria-hidden="true">
... parent content ...
<button type="button" data-hc-control="childContent" aria-expanded="true" aria-controls="netstedChiledContent">
Show/Hide child content
</button>
<div id="netstedChiledContent" data-hc-content="childContent" aria-hidden="true">... child content ...</div>
</div>