A pure Javascript module for accordion/collapse UI without jQuery
npm install handy-collapseA pure Javascript module for accordion/collapse UI without jQuery.
> examples
Using npm or yarn, install handy-collapse
> npm
``sh`
npm install handy-collapsesh`
yarn add handy-collapse
`javascript`
import HandyCollapse from "handy-collapse";
`javascript`
new HandyCollapse(options);
#### Minimum markup
`html
#### With
attribute for accessibility`html
`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
javascript
handyCollapse.open(contentID, [isRunCallback, isAnimation]);
`javascript
handyCollapse.close(contentID, [isRunCallback, isAnimation]);
`Sample
$3
javascript
//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");
`$3
html
class="is-active"
data-hc-control="content02"
aria-expanded="true"
aria-controls="basicContent02"
>
Show/Hide Content 02
... Content 02 ...
``