handy-collaps.js
A pure Javascript module for accordion/collapse UI without JQuery.
> examples
Usage
Install
Using npm, install handy-collapse
> npm
$ npm install handy-collapse --save
Import
;
or html
Initialize
options;
Markup
<!-- Add data attribute, button/content element. Control Button: data-{namespase}-control="{ID}" * multiple elements Toggle Content: data-{namespase}-content="{ID}" * only one element --> Show/Hide Content Toggle Content
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
handyCollapse
Sample
JS
//Default Optionsconst myAccrodion = ; //Full Optionsconst myAccrodionCustom = nameSpace: "hc" activeClass: "is-active" isAnimation: true closeOthers: true animationSpeed: 400 cssEasing: "ease" { console; const buttonEl = document; console; } { console; const contentEl = document; console; }; // Open by JsmyAccrodion // Close by JsmyAccrodion
HTML
<!-- BUTTON : data-{namespase}-control="{ID}" * multiple element CONTENT: data-{namespase}-content="{ID}" * only one element --><!-- basic --> Show/Hide Content 01 ... Content 01 ... <!-- if add activeClass(def: "is-active"), Opened on init. --> Show/Hide Content 02 ... Content 02 ... <!-- can use nested accordion --> Show/Hide parent content ... parent content ... Show/Hide child content ... child content ...