pure-js-accordion

Simply accordion library made by Vanilla JavaScript.

Demo: https://hikiroom.github.io/pure-js-accordion/sample/index.html

Installation

Script

Download code here.

ESM

$ npm install -S pure-js-accordion

Usage

Script

<div class="box">
    <button class="button" type="button">trigger</button>
    <div class="content">
        <p>target</p>
    </div>
</div>

<script>
const btn = document.querySelectorAll('button');

for (const trigger of btn) {
    const target = document.querySelector(trigger.dataset.target);
    const isOpen = trigger.dataset.hasOwnProperty('isOpen');
    const duration = 0.4;
    const options = {
        trigger,
        target,
        isOpen,
        duration,
    };
    const pjsa = new PJSAccordion(options);
}
</script>

ESM

import PJSAccordion from 'pure-js-accordion';

const btn = document.querySelectorAll('button');

for (const trigger of btn) {
    const target = document.querySelector(trigger.dataset.target);
    const isOpen = trigger.dataset.hasOwnProperty('isOpen');
    const duration = 0.4;
    const options = {
        trigger,
        target,
        isOpen,
        duration,
    };
    const pjsa = new PJSAccordion(options);
}

API

Options

trigger

| Type | Default value | | --- | --- | | HTMLElement | null |

Collapse target element when on click this element.

target

| Type | Default value | | --- | --- | | HTMLElement | null |

This element is target of collapse.
If this value is null, set next sibling of trigger element.

isOpen

| Type | Default value | | --- | --- | | Boolean | false |

Decide whether to collapse target element.

duration

| Type | Default value | | --- | --- | | Number | 0.2 |

Collapse duration.

Instance methods

open

Open target element.

close

Close target element.

toggle

Toggle target element.

License

Licensed under the MIT license
https://github.com/hikiroom/pure-js-accordion/blob/master/LICENSE