@bornfight/b-accordion

    1.0.12 • Public • Published
    Bornfight

    b-accordion [all b- libs]

    Bornfight frontend lib for accordion type interactions/elements

    GitHub package.json version GitHub package.json dynamic GitHub issues GitHub

    📦 Getting Started

    Dependency: gsap

    • install b-accordion trough npm or pull ti from git
    npm i @bornfight/b-accordion
    
    • include b-accordion to your JS and SCSS after running npm install

    🔨️ Usage

    JS

    import Accordion from "@bornfight/b-accordion";
    Basic
    new Accordion();
    Advanced
    new Accordion(".js-accordion", {
        openDuration: 0.5,
        openDelay: 0,
        openingEase: "bounce.out",
        closeDuration: 0.3,
        closeDelay: 0,
        closeingEase: "bounce.in",
    });
    SCSS
    @import "~@bornfight/b-accordion/src/scss/style.scss";
    • scss import is not mandatory but following code must be included
    .js-accordion-panel {
        backface-visibility: hidden;
        overflow: hidden;
        height: 0;
    }
    HTML markup

    Mono accordion with single item header as hit area (only one item can be active and only item header will trigger open/close). Main wrapper "js-accordion" need to have "is-mono" class

    <div class="js-accordion is-mono">
        <div class="js-accordion-single">
            <div class="js-accordion-header">
                <p>
                    Accordion header title 1
                </p>
            </div>
            <div class="js-accordion-panel">
                <!-- CONTENT -->
                ...
            </div>
        </div>
    
        <div class="js-accordion-single">
            <div class="js-accordion-header">
                <p>
                    Accordion header title 2
                </p>
            </div>
            <div class="js-accordion-panel">
               <!-- CONTENT -->
                ...
            </div>
        </div>
    </div>

    Single item header as hit area (only header will trigger open/close)

    <div class="js-accordion">
        <div class="js-accordion-single">
            <div class="js-accordion-header">
                <p>
                    Accordion header title 1
                </p>
            </div>
            <div class="js-accordion-panel">
                <!-- CONTENT -->
                ...
            </div>
        </div>
    
        <div class="js-accordion-single">
            <div class="js-accordion-header">
                <p>
                    Accordion header title 2
                </p>
            </div>
            <div class="js-accordion-panel">
                <!-- CONTENT -->
                ...
            </div>
        </div>
    </div>
    • Single item full body as hit area (item can be opened and closed wherever you click)
    <div class="js-accordion">
        <div class="js-accordion-single js-accordion-header">
            <div>
                <p>
                    Accordion header title 1
                </p>
            </div>
            <div class="js-accordion-panel">
                <!-- CONTENT -->
                ...
            </div>
        </div>
    
        <div class="js-accordion-single js-accordion-header">
            <div>
                <p>
                    Accordion header title 2
                </p>
            </div>
            <div class="js-accordion-panel">
                <!-- CONTENT -->
                ...
            </div>
        </div>
    </div>

    Options

    Option Type Default Example Note
    jsClass string '.js-accordion' '.my-accordion'
    openingEase string 'power4.out' 'expo.out' GSAP easing
    closingEase string 'power4.in' 'expo.in' GSAP easing
    openDuration number 0.5 0.2 seconds
    closeDuration number 0.3 1 seconds
    openDelay number 0 0.2 seconds
    closeDelay number 0 0.2 seconds

    💎 Customization

    • use your imagination

    🚀 Useful to know

    1. any element inside js-accordion-single can be trigger for open/close. It just needs to have js-accordion-header class
    2. only one element inside js-accordion-single can have js-accordion-header class

    📦 Contribute

    Gulp based system

    npm run dev - dev environent with browsersync

    License

    MIT © Bornfight

    Install

    npm i @bornfight/b-accordion

    DownloadsWeekly Downloads

    13

    Version

    1.0.12

    License

    MIT

    Unpacked Size

    23 kB

    Total Files

    9

    Last publish

    Collaborators

    • ilesar
    • antonio.preucil
    • degordian-dev
    • mario.loncarek
    • tjezidzic
    • shockwavee
    • jurajuki
    • ddrempe
    • maroje