Skip to content

viivue/easy-tab-accordion

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

Easy Tab & Accordion (ETA)

release minified jsdelivr license Netlify Status

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