Vanilla JS mobile friendly accordion library
Simple accordion library for faster mobile device rendering using CSS transition instead of JS animation such as jQuery slideToggle. You don't have to hardcode any height value and the accordion collapse/expand in smooth sync motion for smartphone and tablet devices.
 |  |  |  |  |  |
|---|---|---|---|---|---|
| 50+ ✅ | 40+ ✅ | 9+ ✅ | 40+ ✅ | 12+ ✅ | 11+ ✅ |
https://www.npmjs.com/package/ackordion
Check the index.html for inspiration.
ackordion.min.js and ackordion.min.css in the html pageApply this JavaScript when the DOM is ready for a single accordion. The id must match the one in the html markup.
Default
<ul role="tablist" class="ackordion" id="ackordion-1">
<li role="tabpanel">
<button role="tab" onclick="ackordion.toggle(this)">title</button>
<section>
<div>
<article>
Contrary to popular belief, Lorem Ipsum is not simply random text.
</article>
</div>
</section>
</li>
<li>
...
/<li>
</ul>
Default with toggle aside
<ul role="tablist" class="ackordion" id="ackordion-1">
<li role="tabpanel">
<header>
<label>This is a header</label>
<button role="tab" onclick="ackordion.toggle(this)">toggle</button>
</header>
<section>
<div>
<article>
Contrary to popular belief, Lorem Ipsum is not simply random text.
</article>
</div>
</section>
</li>
<li>
...
/<li>
</ul>
To start with a default opened tab apply the css class class="ackordion--active"
<li role="tabpanel" class="ackordion--active">
...
</li>
ackordion.init('ackordion-1');
Alternatively you can use initAll.
ackordion.initAll();
var config = {
// required - html id
id: 'ackordion-1',
// optional - transition duration, default is in the css, 200ms
duration: '600ms',
// optional - default is in the css, max-height 200ms cubic-bezier(0,0,.3,1)
transition: 'max-height 300ms cubic-bezier(.27,.82,.29,.84)',
// optional - close previous opened tab when a new tab is opened, default true
autoClosePrevious: false,
// optional - set a specific close height, default 0px
closeHeight: '32px',
};
ackordion.init(config);
// To prevent using transition-end event use this.
// If used the height is not auto adjusted on device rotate or browser resizing
ackordion.isTransitionEndDisabled = true; // optional, default false
Alternatively you can apply same config to all accordions using initAll.
var config = {
duration: '300ms',
transition: 'max-height 200ms cubic-bezier(.27,.82,.29,.84)',
autoClosePrevious: false,
};
ackordion.initAll(config);
Possible callback event binding
E.g. add callbacks when an accordion has been initiated
ackordion.addCallbackForEvent('init', function(eventName, accordion) {
console.log('event triggered');
console.log(eventName);
console.log('on accordion');
console.log(accordion);
});
E.g. add callbacks when accordion has changed to opened or closed state
ackordion.addCallbackForEvent('afteropen', function(eventName, accordion, item) {
console.log('event triggered');
console.log(eventName);
console.log('on accordion');
console.log(accordion);
console.log('on item');
console.log(item);
});
ackordion.addCallbackForEvent('afterclose', function(eventName, accordion, item) {
console.log('event triggered');
console.log(eventName);
console.log('on accordion');
console.log(accordion);
console.log('on item');
console.log(item);
});
If you later want to remove an accordion from your page you can remove the used memory.
E.g. ackordion.destroy('the-accordion-id');
You can remove all the used memory by applying destroyAll
ackordion.destroyAll();
For minification
Browsers which supports requestAnimationFrame (rAF), transitionend event, css max-height transition and Ecmascript 5.
This uses CSS transition on max-height value. The max-height is dynamically set and removed with JS during expanding and collapsing. The height value is calculated dynamically based on the content. You can rotate the device or resize the browser window where the height is dynamically adjusted. The onclick declarative binding in the markup is used to make it flexible for removing or adding items without having to use addEvent or removeEvent listener bindings. When an item is expanded the attribute is set aria-expanded=true for the expanded tabpanel.
The max-height triggers layout, paint and composite but is faster than JS animation. https://csstriggers.com/max-height
I tested this with smartphones and tablets and was happy with the result.
I could have aimed for transform: translate which might have better performance, but max-height seemed simpler to implement and more flexible for content height adaptation.
The accessibility part was implemented with inspiration from: Accordion: Live Coding Session - Supercharged https://www.youtube.com/watch?v=P2glQ0fz7DM&ab_channel=GoogleChromeDevelopers
MIT
1.0.6
FAQs
VanillaJS mobile friendly accordion library
We found that ackordion demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Socket’s new Tier 1 Reachability filters out up to 80% of irrelevant CVEs, so security teams can focus on the vulnerabilities that matter.
Research
/Security News
Ongoing npm supply chain attack spreads to DuckDB: multiple packages compromised with the same wallet-drainer malware.
Security News
The MCP Steering Committee has launched the official MCP Registry in preview, a central hub for discovering and publishing MCP servers.