@bornfight/b-accordion

b-accordion [all b- libs]

Bornfight frontend lib for accordion type interactions/elements

📦 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,
    closingEase: "bounce.in",
    onCloseStart: (header, content) => {
        console.log("close start", header, content);
    },
    onCloseComplete: (header, content) => {
        console.log("close complete", header, content);
    },
    onOpenStart: (header, content) => {
        console.log("open start", header, content);
    },
    onOpenComplete: (header, content) => {
        console.log("open complete", header, content);
    },
});

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
onOpenStart	method	(header, content) => {}		returns header and content of current item (header, content)
onCloseStart	method	(header, content) => {}		returns header and content of current item (header, content)
onOpenComplete	method	(header, content) => {}		returns header and content of current item (header, content)
onCloseComplete	method	(header, content) => {}		returns header and content of current item (header, content)

💎 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

• Gulp 4 used
• browsersync for live reload

npm run dev - dev environent with browsersync

License

MIT © Bornfight