@terrahq/collapsify.js

Javascript module for accordion/collapse/tabs written in Vanilla js.
> examples

Usage

Install

1npm install @terrahq/collapsify

Import

1import Collapsify from "@terrahq/collapsify";

Initialize

1new Collapsify(options);

Markup

Minimum markup

1<!-- 
2    Add data attribute, button/content element.
3    Control Button:  data-{namespase}-control="{ID}" * multiple elements
4    Toggle Content:  data-{namespase}-content="{ID}" * only one element
5 -->
6<button type="button" data-collapsify-control="uniqID">Show/Hide Content</button>
7
8<div data-collapsify-content="uniqID">Toggle Content</div>

With aria-* attribute for accessibility

1<button type="button" data-collapsify-control="uniqID" aria-expanded="false" aria-controls="contentID">Show/Hide Content</button>
2
3<div id="contentID" data-collapsify-content="uniqID" aria-hidden="true">Toggle Content</div>

Options

Option Name	Type	Default	Desc
nameSpace	string	"collapsify"	Set namespace for "toggleButtonAttr", "toggleContentAttr" & "toggleSelectOptionsAttr"
toggleButtonAttr	string	"data-collapsify-control"	data attribute for Button Element
toggleContentAttr	string	"data-collapsify-content"	data attribute for Content
dropdownElement	HTMLSelectElement	-	HTML dropdown element for tablets/mobiles
isTab	boolean	false	The package being used for tabs
activeClass	string	"is-active"	Add class on opened Element
isAnimation	boolean	true	animation Slide
closeOthers	boolean	true	Close others Content
animationSpeed	number	400	css transition duration(ms)
cssEasing	string	"ease-in-out"	css transition easing (only isAnimation:true)
onSlideStart	(isOpen:boolean,contentID:string)=> void	() => void	Callback on Open/Close Animation Start @param {Boolean} isOpen @param {String} contentID * Don't ID Attribute
onSlideEnd	(isOpen:boolean,contentID:string)=> void	() => void	Callback on Open/Close Animation End @param {Boolean} isOpen @param {String} contentID * Don't ID Attribute

Methods

Open/Close Content

1collapsify.open(contentID, [isRunCallback, isAnimation]);

1collapsify.close(contentID, [isRunCallback, isAnimation]);

Samples

JS

1//Default Options
2const myAccrodion = new Collapsify();
3
4//Full Options
5const myAccrodionCustom = new Collapsify({
6    nameSpace: "collapsify", // Note: Be sure to set different names when creating multiple instances
7    activeClass: "is-active",
8    isAnimation: true,
9    closeOthers: true,
10    animationSpeed: 400,
11    cssEasing: "ease",
12    onSlideStart: (isOpen, contentID) => {
13        console.log(isOpen);
14        const buttonEl = document.querySelectorAll(`[data-collapsify-control='${contentID}']`);
15        console.log(buttonEl);
16    },
17    onSlideEnd: (isOpen, contentID) => {
18        console.log(isOpen);
19        const contentEl = document.querySelector(`[data-collapsify-content='${contentID}']`);
20        console.log(contentEl);
21    },
22});
23
24// Open by Js
25myAccrodion.open("content01");
26
27// Close by Js
28myAccrodion.close("content01");

HTML

1<!-- 
2    BUTTON :  data-{namespase}-control="{ID}" * multiple element
3    CONTENT:  data-{namespase}-content="{ID}" * only one element
4 -->
5<!-- basic -->
6<button type="button" data-collapsify-control="content01" aria-expanded="false" aria-controls="basicContent01">Show/Hide Content 01</button>
7<div id="basicContent01" data-collapsify-content="content01" aria-hidden="true">... Content 01 ...</div>
8
9<!-- if add activeClass(def: "is-active"), Opened on init. -->
10<button type="button" class="is-active" 　 data-collapsify-control="content02" aria-expanded="true" aria-controls="basicContent02">Show/Hide Content 02</button>
11<div id="basicContent02" class="is-active" data-collapsify-content="content02" aria-hidden="false">... Content 02 ...</div>
12
13<!-- can use nested accordion -->
14<button type="button" data-collapsify-control="parentContent" aria-expanded="true" aria-controls="netstedParantContent">Show/Hide parent content</button>
15<div id="netstedParantContent" data-collapsify-content="parentContent" aria-hidden="true">
16    ... parent content ...
17    <button type="button" 　 data-collapsify-control="childContent" aria-expanded="true" aria-controls="netstedChiledContent">Show/Hide child content</button>
18    <div id="netstedChiledContent" data-collapsify-content="childContent" aria-hidden="true">... child content ...</div>
19</div>

JS

1//Tab example
2const tab = new Collapsify({
3    nameSpace: "tab",
4    closeOthers: true,
5    isTab: true,
6    dropdownElement: document.querySelector(".js--select-item-a"),
7});

HTML

1<div class="c--tabs-a">
2    <div class="c--tabs-a__hd">
3        <ul class="c--tabs-a__hd__list">
4            <li class="c--tabs-a__hd__list__list-item">
5                <button
6                    class="c--tabs-a__hd__list__list-item__link c--tabs-a__hd__list__list-item__link--is-active js--select-tab"
7                    type="button"
8                    data-tab-control="tabContent-01"
9                    aria-expanded="false"
10                >
11                    Tab 01
12                </button>
13            </li>
14            <li class="c--tabs-a__hd__list__list-item">
15                <button class="c--tabs-a__hd__list__list-item__link js--select-tab" type="button" data-tab-control="tabContent-02" aria-expanded="false">Tab 02</button>
16            </li>
17            <li class="c--tabs-a__hd__list__list-item">
18                <button class="c--tabs-a__hd__list__list-item__link js--select-tab" type="button" data-tab-control="tabContent-03" aria-expanded="false">Tab 03</button>
19            </li>
20        </ul>
21
22        <div class="c--tabs-a__hd__selector">
23            <select aria-label="tab selector" class="c--tabs-a__hd__selector__item js--select-item-a">
24                <option value="" disabled="" selected="">Select</option>
25                <option data-tab-dropdown-item="tabContent-01" value="">option 01</option>
26                <option data-tab-dropdown-item="tabContent-02" value="">option 02</option>
27                <option data-tab-dropdown-item="tabContent-03" value="">option 03</option>
28            </select>
29        </div>
30    </div>
31    <div class="c--tabs-a__bd c--tabs-a__bd--is-active" data-tab-content="tabContent-01" aria-hidden="true">
32        <p>
33            Content First: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores nostrum amet excepturi eum. Quo labore, est inventore incidunt debitis voluptatum qui itaque iste quam,
34            asperiores aliquid illum optio atque quidem.
35        </p>
36    </div>
37    <div class="c--tabs-a__bd" data-tab-content="tabContent-02" aria-hidden="true">
38        <p>
39            Content Second: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores nostrum amet excepturi eum. Quo labore, est inventore incidunt debitis voluptatum qui itaque iste quam,
40            asperiores aliquid illum optio atque quidem.
41        </p>
42    </div>
43    <div class="c--tabs-a__bd" data-tab-content="tabContent-03" aria-hidden="true">
44        <p>
45            Content Third: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores nostrum amet excepturi eum. Quo labore, est inventore incidunt debitis voluptatum qui itaque iste quam,
46            asperiores aliquid illum optio atque quidem.
47        </p>
48    </div>
49</div>

License