https://github.com/kunukn/ackordion
VanillaJS mobile friendly accordion library
https://github.com/kunukn/ackordion
Last synced: about 1 month ago
JSON representation
VanillaJS mobile friendly accordion library
- Host: GitHub
- URL: https://github.com/kunukn/ackordion
- Owner: kunukn
- License: mit
- Created: 2016-07-09T22:20:41.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2018-03-02T13:40:13.000Z (about 7 years ago)
- Last Synced: 2025-04-10T09:41:55.555Z (about 1 month ago)
- Language: HTML
- Size: 74.2 KB
- Stars: 4
- Watchers: 0
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# 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` and `ackordion.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
```html
-
title
Contrary to popular belief, Lorem Ipsum is not simply random text.
-
...
/ -
```
Default with toggle aside
```html
-
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"`
```html
...
```
* **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
```javascript
ackordion.init('ackordion-1');
```
### init all
Alternatively you can use initAll.
```javascript
ackordion.initAll();
```
# configuration support
### init
```javascript
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
```
### init all
Alternatively you can apply same config to all accordions using initAll.
```javascript
var config = {
duration: '300ms',
transition: 'max-height 200ms cubic-bezier(.27,.82,.29,.84)',
autoClosePrevious: false,
};
ackordion.initAll(config);
```
### event callbacks
Possible callback event binding
* init
* beforeopen
* afteropen
* beforeclose
* afterclose
E.g. add callbacks when an accordion has been initiated
```javascript
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
```javascript
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);
});
```
### 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