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