@bornfight/c-accordion v1.0.1

b-accordion [all b- libs]

Bornfight frontend project based on gulp, es6 and scss

📦 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";

SCSS

@import "~@bornfight/b-accordion/src/scss/b-accordion.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>

💎 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