@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 | Promise	() => void	Callback on Open/Close Animation Start. Supports async/await @param {Boolean} isOpen @param {String} contentID * Don't ID Attribute
onSlideEnd	(isOpen:boolean,contentID:string)=> void | Promise	() => void	Callback on Open/Close Animation End. Supports async/await @param {Boolean} isOpen @param {String} contentID * Don't ID Attribute
onComplete	() => void | Promise	() => void	Callback triggered after Collapsify finishes initialization. Supports async/await

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    onComplete: () => {
23        console.log('myAccrodionCustom is loaded!');
24    }
25});
26
27// Open by Js
28myAccrodion.open("content01");
29
30// Close by Js
31myAccrodion.close("content01");

Async/Await Support

Collapsify now supports async/await in all callback functions. The library will wait for async operations to complete before proceeding with animations.

1// Example with async/await callbacks
2const asyncCollapsify = new Collapsify({
3    nameSpace: "async-example",
4    onSlideStart: async (isOpen, contentID) => {
5        console.log('Starting animation...');
6        
7        // Example: Track analytics
8        try {
9            await fetch('/api/track-interaction', {
10                method: 'POST',
11                body: JSON.stringify({ 
12                    action: isOpen ? 'open' : 'close',
13                    contentID: contentID 
14                })
15            });
16            console.log('Analytics tracked successfully');
17        } catch (error) {
18            console.error('Failed to track analytics:', error);
19        }
20    },
21    onSlideEnd: async (isOpen, contentID) => {
22        console.log('Animation completed');
23        
24        // Example: Load content dynamically when opened
25        if (isOpen) {
26            try {
27                const response = await fetch(`/api/content/${contentID}`);
28                const data = await response.json();
29                
30                const contentEl = document.querySelector(`[data-async-example-content='${contentID}']`);
31                if (contentEl) {
32                    contentEl.innerHTML = data.html;
33                }
34            } catch (error) {
35                console.error('Failed to load dynamic content:', error);
36            }
37        }
38    },
39    onComplete: async () => {
40        console.log('Initializing...');
41        
42        // Example: Initialize other components after Collapsify is ready
43        await new Promise(resolve => setTimeout(resolve, 100));
44        console.log('Collapsify fully initialized with async support!');
45    }
46});

Key Features:

• All callbacks (onSlideStart, onSlideEnd, onComplete) support async functions
• The library waits for async operations to complete before continuing
• Perfect for API calls, dynamic content loading, analytics tracking, etc.
• Maintains backward compatibility with synchronous callbacks

HTML Examples

Basic Collapse/Toggle

1<!-- Simple collapse - single content that can be toggled -->
2<button type="button" data-collapsify-control="content01" aria-expanded="false" aria-controls="basicContent01">
3    Show/Hide Content
4</button>
5<div id="basicContent01" data-collapsify-content="content01" aria-hidden="true">
6    <p>This content can be toggled open and closed.</p>
7</div>

Accordion

1<!-- Accordion - multiple sections, only one open at a time -->
2<div class="accordion">
3    <!-- Section 1 -->
4    <button type="button" class="is-active" data-collapsify-control="accordion01" aria-expanded="true" aria-controls="accordionContent01">
5        Section 1 Title
6    </button>
7    <div id="accordionContent01" class="is-active" data-collapsify-content="accordion01" aria-hidden="false">
8        <p>Content for section 1. This section is open by default.</p>
9    </div>
10
11    <!-- Section 2 -->
12    <button type="button" data-collapsify-control="accordion02" aria-expanded="false" aria-controls="accordionContent02">
13        Section 2 Title
14    </button>
15    <div id="accordionContent02" data-collapsify-content="accordion02" aria-hidden="true">
16        <p>Content for section 2.</p>
17    </div>
18
19    <!-- Section 3 -->
20    <button type="button" data-collapsify-control="accordion03" aria-expanded="false" aria-controls="accordionContent03">
21        Section 3 Title
22    </button>
23    <div id="accordionContent03" data-collapsify-content="accordion03" aria-hidden="true">
24        <p>Content for section 3.</p>
25    </div>
26</div>

Tabs

1<!-- Tabs - navigation buttons + content panels -->
2<div class="tabs">
3    <!-- Tab Navigation -->
4    <div class="tab-nav">
5        <button type="button" class="is-active" data-tab-control="tab01" aria-expanded="true">
6            Tab 1
7        </button>
8        <button type="button" data-tab-control="tab02" aria-expanded="false">
9            Tab 2
10        </button>
11        <button type="button" data-tab-control="tab03" aria-expanded="false">
12            Tab 3
13        </button>
14        
15        <!-- Optional: Dropdown for mobile -->
16        <select class="tab-dropdown">
17            <option value="" disabled selected>Select Tab</option>
18            <option data-tab-dropdown-item="tab01" value="">Tab 1</option>
19            <option data-tab-dropdown-item="tab02" value="">Tab 2</option>
20            <option data-tab-dropdown-item="tab03" value="">Tab 3</option>
21        </select>
22    </div>
23
24    <!-- Tab Content -->
25    <div class="tab-content">
26        <div class="is-active" data-tab-content="tab01" aria-hidden="false">
27            <p>Content for Tab 1. This tab is active by default.</p>
28        </div>
29        <div data-tab-content="tab02" aria-hidden="true">
30            <p>Content for Tab 2.</p>
31        </div>
32        <div data-tab-content="tab03" aria-hidden="true">
33            <p>Content for Tab 3.</p>
34        </div>
35    </div>
36</div>

Nested Accordion

1<!-- Nested accordion - accordion inside accordion -->
2<div class="nested-accordion">
3    <!-- Parent Section -->
4    <button type="button" data-collapsify-control="parentContent" aria-expanded="false" aria-controls="parentContentDiv">
5        Parent Section
6    </button>
7    <div id="parentContentDiv" data-collapsify-content="parentContent" aria-hidden="true">
8        <p>Parent content...</p>
9        
10        <!-- Child Accordion -->
11        <button type="button" data-collapsify-control="childContent" aria-expanded="false" aria-controls="childContentDiv">
12            Child Section
13        </button>
14        <div id="childContentDiv" data-collapsify-content="childContent" aria-hidden="true">
15            <p>Child content nested inside parent.</p>
16        </div>
17    </div>
18</div>

JavaScript Initialization for Each Case

1// Basic Collapse
2const collapse = new Collapsify();
3
4// Accordion (closeOthers: true ensures only one section open)
5const accordion = new Collapsify({
6    closeOthers: true
7});
8
9// Tabs (isTab: true prevents closing active tab)
10const tabs = new Collapsify({
11    nameSpace: "tab",
12    isTab: true,
13    closeOthers: true,
14    dropdownElement: document.querySelector('.tab-dropdown')
15});
16
17// Nested Accordion (separate instances for parent and child)
18const parentAccordion = new Collapsify({
19    nameSpace: "collapsify"
20});

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