Easy Tabs & Accordion v2.3.3

Install

With npm

Install NPM package

npm i @viivue/easy-tab-accordion

Import

// script
import "@viivue/easy-tab-accordion";

View package at @viivue/easy-tab-accordion

With CDN

<!-- Easy Tab Accordion -->
<script src="https://cdn.jsdelivr.net/gh/viivue/easy-tab-accordion@2.3.1/dist/easy-tab-accordion.min.js"></script>

Demos

Accordion

<div data-eta>
    <!-- section 1 -->
    <div>
        <button data-eta-trigger="section-1">Section 1</button>
        <div data-eta-receiver="section-1">Content</div>
    </div>

    <!-- section 2 -->
    <div>
        <button data-eta-trigger="section-2">Section 2</button>
        <div data-eta-receiver="section-2">Content</div>
    </div>
</div>

Tab

<div data-eta='{"animation":"fade"}'>
    <!-- trigger -->
    <div>
        <button data-eta-trigger="section-1">Section 1</button>
        <button data-eta-trigger="section-2">Section 2</button>
    </div>

    <!-- content -->
    <div>
        <div data-eta-receiver="section-1">Content</div>
        <div data-eta-receiver="section-2">Content</div>
    </div>
</div>

Use

Init via HTML attributes

Init via HTML attributes on the wrapper element.

<div data-eta='{ "id":"my-id", "animation":"slide", "hash":"false", "duration":"100"}'>
    <!-- section 1 -->
    <div>
        <button data-eta-trigger="section-1">Section 1</button>
        <div data-eta-receiver="section-1">Content</div>
    </div>

    <!-- section 2 -->
    <div>
        <button data-eta-trigger="section-2">Section 2</button>
        <div data-eta-receiver="section-2">Content</div>
    </div>
</div>

⚠️ Notice that value of data-eta-trigger and data-eta-receiver must be the same.

Init via JavaScript

Assume that we have the HTML like below

<!-- Custom HTML -->
<div class="my-accordion">
    <!-- section 1 -->
    <div>
        <button data-trigger="section-1">Section 1</button>
        <div class="content" id="section-1">Content</div>
    </div>

    <!-- section 2 -->
    <div>
        <button data-trigger="section-2">Section 2</button>
        <div class="content" id="section-2">Content</div>
    </div>
</div>

// Init
ETA.init({
    el: document.querySelector('.my-accordion'), // DOM element
    trigger: '[data-trigger]', // CSS selector
    triggerAttr: 'data-trigger', // attribute name
    receiver: '.content', // CSS selector
    receiverAttr: 'id', // attribute name
});

Options

Selectors

⚠️ Notice that value of triggerAttr and receiverAttr must be the same.

Animation

Hash

Responsive

liveBreakpoint defines a range to enable ETA, when the browser's width is outside this range ETA will be destroyed ( detecting via window resizing event).

For instance:

• liveBreakpoint:[99999,768]: destroy ETA on screen that smaller than 768px
• liveBreakpoint:[1024,-1]: destroy ETA on screen that bigger than 1024px

Open and close

For animation:"slide" only

Prevent default option

HTML attributes

Add these attributes on the wrapper element.

Methods

Get the instance with JS init

ETA.init({
    id: 'my-eta'
});

const eta = ETA.get('my-eta');

// use methods
eta.update();

eta.on("destroy", () => {
    // do something
});

Destroy method

expandAll() method

Assume that we have the HTML below

<div data-accordion>
    <div>
        <button data-accordion-trigger="section-1">Section 1</button>
        <div data-accordion-receiver="section-1">
            <p>Fusce quisque nam ac tortor sagittis. Nullam habitasse integer
                aliquam potenti magnis conubia nisl tincidunt non nascetur molestie dignissim.
                pellentesque faucibus lectus. Scelerisque cursus magnis imperdiet nec consectetur dis dictum
                odio.</p>
        </div>
    </div>
    <div>
        <button data-accordion-trigger="section-2">Section 2</button>
        <div data-accordion-receiver="section-2">
            <p>Mauris leo rutrum auctor si massa. Nibh parturient nam porta congue tincidunt consectetuer
                sagittis a convallis facilisis.
            </p>
        </div>
    </div>
    <div class="btn-group">
        <button class="btn red" data-btn="destroy-accordion">Destroy</button>
    </div>
</div>

ETA.init({
    el: document.querySelector('[data-accordion]'),
    id: 'accordion',
    trigger: '[data-accordion-trigger]',
    triggerAttr: 'data-accordion-trigger',
    receiver: '[data-accordion-receiver]',
    receiverAttr: 'data-accordion-receiver',
    allowCollapseAll: false,
    //allowExpandAll: true,
    //liveBreakpoint: [1920, 1024]
    //hash: true
});
const accordion = ETA.get('accordion');

/**
 * Button click
 */
document.querySelectorAll('[data-btn]').forEach(btn => {
    btn.addEventListener('click', (e) => {
        switch(e.target.dataset.btn){
            case 'destroy-accordion':
                accordion.destroy();
                break;
        }
    })
});

License

MIT License

Copyright (c) 2024 ViiVue