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/easy-tab-accordion@2.3.1/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.

<!-- Accordion - 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>

<!-- Tabs - No Js init -->
<div data-eta data-eta-animation="fade">
    <!-- section 1 -->
    <div>
        <button data-eta-trigger="section-1">Section 1</button>
        <button data-eta-trigger="section-2">Section 2</button>
    </div>

    <!-- section 2 -->
    <div>
        <div data-eta-receiver="section-1">Content</div>
        <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"}'>
    <!-- inner HTML here -->
</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">
    <!-- inner HTML here -->
</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
id	string	random UUID	❌	ID of this instance
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("onAfterOpen", (data) => {
    // do something
    console.log(data);
});

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