❤Nearest Phase Modulator

npm

Sign UpSign In
Wondering what’s next for npm?Check out our public roadmap! »

handy-collapse

1.0.2 • Public • Published

handy-collaps.js

A pure Javascript module for accordion/collapse UI without JQuery.
> examples

NPM

npm version Netlify Status

Usage

Install

Using npm, install handy-collapse
> npm

$ npm install handy-collapse --save

Import

import HandyCollapse from "handy-collapse";

or html

<script src="path/to/handy-collapse.js"></script>

Initialize

new HandyCollapse(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
 -->
<button type="button" data-hc-control="uniqID">
    Show/Hide Content
</button>
 
<div data-hc-content="uniqID">
    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

examples

JS

 
//Default Options
const myAccrodion = new HandyCollapse();
 
//Full Options
const myAccrodionCustom = new HandyCollapse({
    nameSpace: "hc",
    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">
    Show/Hide Content 01
</button>
<div data-hc-content="content01">
    ...
    Content 01
    ...
</div>
 
<!-- if add activeClass(def: "is-active"), Opened on init. -->
<button type="button" class="is-active"　data-hc-control="content02">
    Show/Hide Content 02
</button>
<div class="is-active" data-hc-content="content02">
    ...
    Content 02
    ...
</div>
 
<!-- can use nested accordion -->
<button type="button"　data-hc-control="parentContent">
    Show/Hide parent content
</button>
<div data-hc-content="parentContent">
    ...
    parent content
    ...
    <button type="button"　data-hc-control="childContent">
        Show/Hide child content
    </button>
    <div data-hc-content="childContent">
        ...
        child content
        ...
    </div>
</div>

License

MIT

Keywords

Install

npm i handy-collapse

DownloadsWeekly Downloads

52

Version

1.0.2

License

MIT

Unpacked Size

58.4 kB

Total Files

21

Homepage

github.com/sk-rt/handy-collapse#readme

Repository

Gitgithub.com/sk-rt/handy-collapse

Last publish

Collaborators

  • avatar
Try on RunKit
Report malware