Handorgel
Accessible W3C conform accordion written in ES6. Handorgel is the Swiss German name for accordion.
Features
- ARIA accessible
- Keyboard interaction
- Extensive API
- Animated collapsing
- Fully customizable via CSS
- No external dependencies
- Lightweight (~3kb minified and gziped)
Installation
Package manager
| Manager | Command |
|---|---|
| npm | npm install handorgel |
| yarn | yarn add handorgel |
CDN / Download
| File | CDN |
|---|---|
| CSS | handorgel.css |
| CSS (minified) | handorgel.min.css |
| JS | handorgel.js |
| JS (minified) | handorgel.min.js |
Usage
Markup
<div class="handorgel">
<h3 class="handorgel__header">
<button class="handorgel__header__button">
Title
</button>
</h3>
<div class="handorgel__content" data-open>
<div class="handorgel__content__inner">
Content openened by default
</div>
</div>
<h3 class="handorgel__header">
<button class="handorgel__header__button">
Title 2
</button>
</h3>
<div class="handorgel__content">
<div class="handorgel__content__inner">
Content closed by default
</div>
</div>
...
</div>Note: Use the heading tags that fit into your content to output semantic markup.
CSS
Import the SASS file from your node_modules folder to make use of the variables:
// e.g. changing opening/closing transition times
$handorgel__content--open-transition-height-time: .1s;
$handorgel__content--open-transition-opacity-time: .2s;
$handorgel__content-transition-height-time: .05s;
$handorgel__content-transition-opacity-time: .05s;
//...
@import '~handorgel/src/scss/style';Alternatively you can just include the built CSS file inside the /lib folder file or from the CDN.
Javascript
Initialization (with all options and their defaults):
var accordion = new handorgel(document.querySelector('.handorgel'), {
// whether multiple folds can be opened at once
multiSelectable: true,
// whether the folds are collapsible
collapsible: true,
// whether ARIA attributes are enabled
ariaEnabled: true,
// whether W3C keyboard shortcuts are enabled
keyboardInteraction: true,
// whether to loop header focus (sets focus back to first/last header when end/start reached)
carouselFocus: true,
// attribute for the header or content to open folds at initialization
initialOpenAttribute: 'data-open',
// whether to use transition at initial open
initialOpenTransition: true,
// delay used to show initial transition
initialOpenTransitionDelay: 200,
// header/content element selectors or array of elements
headerElements: '.handorgel__header',
contentElements: '.handorgel__content',
// header/content class if fold is open
headerOpenClass: 'handorgel__header--open',
contentOpenClass: 'handorgel__content--open',
// header/content class if fold has been opened (transition finished)
headerOpenedClass: 'handorgel__header--opened',
contentOpenedClass: 'handorgel__content--opened',
// header/content class if fold has been focused
headerFocusClass: 'handorgel__header--focus',
contentFocusClass: 'handorgel__content--focus',
// header/content class if fold is disabled
headerDisabledClass: 'handorgel__header--disabled',
contentDisabledClass: 'handorgel__content--disabled',
})API
Events
| Event | Description | Parameters |
|---|---|---|
destroy |
Accordeon is about to be destroyed. | |
destroyed |
Accordeon has been destroyed. | |
fold:open |
Fold is about to be opened. | HandorgelFold: Fold instance |
fold:opened |
Fold has opened. | HandorgelFold: Fold instance |
fold:close |
Fold is about to be closed. | HandorgelFold: Fold instance |
fold:closed |
Fold has closed. | HandorgelFold: Fold instance |
fold:focus |
Fold button has been focused. | HandorgelFold: Fold instance |
fold:blur |
Fold button has lost focus. | HandorgelFold: Fold instance |
How to listen for events:
var accordion = new handorgel(document.querySelector('.handorgel'))
// listen for event
accordion.on('fold:open', (fold) => {
// ...
})
// listen for event once
accordion.once('fold:open', (fold) => {
// ...
})
// remove event listener
accordion.off('fold:open', fn)Methods
Handorgel Class
| Method | Description | Parameters |
|---|---|---|
update |
Update fold instances (use if you dynamically append/remove DOM nodes). | |
focus |
Set focus to a new header button (you can also directly use the native focus() method on the button). |
target: New header button to focus (next, previous, last or first) |
destroy |
Destroy fold instances, remove event listeners and ARIA attributes. |
Example:
var accordion = new handorgel(document.querySelector('.handorgel'))
// destroy
accordion.destroy()HandorgelFold Class
| Method | Description | Parameters |
|---|---|---|
open |
Open content. | transition: Whether transition should be active during opening (default: true). |
close |
Close content. | transition: Whether transition should be active during closing (default: true). |
toggle |
Toggle content. | transition: Whether transition should be active during toggling (default: true). |
disable |
Disable fold. | |
enable |
Enable fold. | |
focus |
Set focus to fold button. | |
blur |
Remove focus from fold button. | |
destroy |
Remove event listeners and ARIA attributes. |
Example:
var accordion = new handorgel(document.querySelector('.handorgel'))
// close first fold
accordion.folds[0].close()Browser compatibility
- Newest two browser versions of Chrome, Firefox, Safari and Edge
Development
npm run build- Build production version of the feature.npm run demo- Build demo of the feature, run watchers and start browser-sync.npm run test- Test the feature.