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

    handy-collapse
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.4 • 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

    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

    examples

    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>

    License

    MIT

    Install

    npm i handy-collapse

    DownloadsWeekly Downloads

    90

    Version

    1.0.4

    License

    MIT

    Unpacked Size

    56.8 kB

    Total Files

    15

    Last publish

    Collaborators

    • avatar