ackordion
Vanilla JS mobile friendly accordion library
about
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.
demo
- Basic with different configurations and custom themes http://codepen.io/kunukn/full/zBEEEq/
- Nested accordions with inert support http://codepen.io/kunukn/full/dXKEJg/
- Nested accordions with proper tab support http://codepen.io/kunukn/full/bZOdjx/
browser support
50+ ✅ | 40+ ✅ | 9+ ✅ | 40+ ✅ | 12+ ✅ | 11+ ✅ |
npm
https://www.npmjs.com/package/ackordion
usage
Check the index.html for inspiration.
- Add reference to
ackordion.min.js
andackordion.min.css
in the html page - Apply the markup structure for the accordion
- Init the accordion with JS
- Apply custom css to override the library css
Apply this JavaScript when the DOM is ready for a single accordion. The id must match the one in the html markup.
html structure
Default
title Contrary to popular belief, Lorem Ipsum is not simply random text. ... /
Default with toggle aside
This is a header toggle Contrary to popular belief, Lorem Ipsum is not simply random text. ... /
To start with a default opened tab apply the css class class="ackordion--active"
...
- ul is the root component where an id must be provided
- li are the accordion items
- button is the toggle
- section is the wrapper to hide the content on collapsed
- div is the content area without padding top and bottom
- article is used to for padding if needed, the element can be removed
init
ackordion;
init all
Alternatively you can use initAll.
ackordion;
configuration support
init
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; // To prevent using transition-end event use this.// If used the height is not auto adjusted on device rotate or browser resizingackordionisTransitionEndDisabled = true; // optional, default false
init all
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;
event callbacks
Possible callback event binding
- init
- beforeopen
- afteropen
- beforeclose
- afterclose
E.g. add callbacks when an accordion has been initiated
ackordion;
E.g. add callbacks when accordion has changed to opened or closed state
ackordion; ackordion;
cleanup memory on remove
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();
development
- Git clone the project or download it
- npm install
- npm start
For minification
- npm run deploy
features
- Small library - JS is ~7kb minified and CSS is ~1kb minified
- Support for AMD and CommonJS
- Callback support for events: init, beforeopen, afteropen, beforeclose, afterclose
- CSS max-height transition on dynamically calculated height value
- Simple html structure with minimum CSS class usage
- Max-height is dynamically set and reset after the animation
- Tabbing is supported
- Accessibility friendly, a11y
- Multiple accordions supported
- Vanilla JS
supported browsers
Browsers which supports requestAnimationFrame (rAF), transitionend event, css max-height transition and Ecmascript 5.
how does it work?
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.
known bugs / possible hiccups
- Safari 9 animates to height 0px and back to current height on change from a specific max-height value to max-height none. This should not happen and is a browser bug. This has been fixed by using a temporary css class.
- The expanding and collapsing animation might get out of sync if the browser is busy. This is because the animation is handled by the browser and collapsing and expanding are two separate css transition animations.
performance
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.
credits
The accessibility part was implemented with inspiration from: Accordion: Live Coding Session - Supercharged https://www.youtube.com/watch?v=P2glQ0fz7DM&ab_channel=GoogleChromeDevelopers
license
MIT