Easy Tab & Accordion (ETA)

Javascript library to create tabs or accordion.

Getting started

NPM Package

Install NPM package

npm i @viivue/easy-tab-accordion

Import

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

Download

👉 Self hosted - Download the latest release

<script src="./easy-tab-accordion.min.js"></script>

👉 CDN Hosted - jsDelivr

<!-- JS (10KB) -->
<script src="https://cdn.jsdelivr.net/gh/viivue/[email protected]/dist/easy-tab-accordion.min.js"></script>

Initialize

To initialize an ETA script, always remember three things:

1. Wrapper
2. Trigger(s)
3. Receiver(s)

With HTML

Using these HTML attributes to initialize without JavaScript.

<!-- No Js init -->
<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>

Or using data-attributes (with JSON format) to initialize.

<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.

With 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

| Name | Type | Default | Required | Description | |--------------|-------------|-----------------------|----------|--------------------------------------------| | el | DOM element | [data-eta] | ✅ | Wrapper element | | trigger | string | [data-eta-trigger] | ✅ | CSS selector for trigger elements | | triggerAttr | string | data-eta-trigger | ✅ | Attribute name of trigger elements | | receiver | string | [data-eta-receiver] | ✅ | CSS selector for receiver elements | | receiverAttr | string | data-eta-receiver | ✅ | Attribute name of receiver elements | | activeClass | string | "active" | ❌ | Class name for active trigger and receiver |

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

Animation

| Name | Type | Default | Description | |----------------|---------|-----------|-----------------------------------------------------------------------------------------------------------| | animation | string | "slide" | "slide" for accordion style (slide up and slide down), "fade" for tabbed style (fade in and fade out) | | duration | number | 450 | Duration of animation in millisecond | | scrollIntoView | boolean | false | Scroll panel into view when open |

Hash

| Name | Type | Default | Description | |------------|---------|---------|-----------------------------------------------------| | hash | boolean | false | Update hash URL | | hashScroll | boolean | false | Scroll into view when page loaded with a valid hash |

Responsive

| Name | Type | Default | Description | |----------------|-------|---------|-------------------------| | liveBreakpoint | array | [] | An array of two numbers |

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

| Name | Type | Default | Description | |---------------|--------------|---------|----------------------------------------------------------------------------------------------| | activeSection | number/array | 0 | Index(s) of section to be active on init, array input only available for animation:"slide" |

For animation:"slide" only

| Name | Type | Default | Description | |------------------|---------|---------|-------------------------------------------------| | allowCollapseAll | boolean | false | Allow to collapse all sections at the same time | | allowExpandAll | boolean | false | Allow to expand all sections at the same time |

Prevent default option

| Name | Type | Default | Description | |------------------|---------|---------|--------------------------------------------------------------------| | isPreventDefault | boolean | true | Allow preventing the default behavior when clicking on the trigger |

HTML attributes

Add these attributes on the wrapper element.

| Attribute | As for option | |-------------------------------------|---------------------------| | data-eta-animation="fade" | animation: "fade" | | data-eta-hash | hash: true | | data-eta-hash-scroll | hashScroll: true |

Events

| Name | Description | |-------------------------------|-------------| | onBeforeInit: (data) => {} | | | onAfterInit: (data) => {} | | | onBeforeOpen: (data) => {} | | | onBeforeClose: (data) => {} | | | onAfterOpen: (data) => {} | | | onAfterClose: (data) => {} | | | onDestroy: (data) => {} | | | onUpdate: (data) => {} | |

Methods

| Name | Usage | Description | |-----------------|-------------------------------------------|-----------------------------------------------------------------------| | toggle | eta.toggle(panelId) | Toggle a panel | | openPanel | eta.openPanel(panelId, isStrict=false) | Open a panel. Turn isStrict on to only open is currently closing. | | closePanel | eta.closePanel(panelId, isStrict=false) | Close a panel. Turn isStrict on to only close is currently opening. | | toggleByIndex | eta.toggleByIndex(index) | Toggle a section by index | | destroy | eta.destroy() | Remove all style and events | | init | eta.init() | Could be use after destroy | | update | eta.update() | Update styling | | on | eta.on() | Assign events |

Get the instance with JS init

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

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

// use methods
eta.update();
eta.on("open", () => {
    // do something
});

Deployment

# Start dev server
npm run dev

# Distribute production files (set new version in `package.json` first)
npm run prod

# Build dev site (for Netlify only)
npm run build

# Research replace to set new version
npm publish

License

MIT License

Copyright (c) 2023 ViiVue