Accessible W3C conform accordion written in ES6. Handorgel
is the Swiss German name for accordion.
- ARIA accessible
- Keyboard interaction
- Extensive API
- Animated collapsing
- Fully customizable via CSS
- No external dependencies
- Lightweight (~3kb minified and gziped)
Manager | Command |
---|---|
npm | npm install handorgel |
yarn | yarn add handorgel |
File | CDN |
---|---|
CSS | handorgel.css |
CSS (minified) | handorgel.min.css |
JS | handorgel.js |
JS (minified) | handorgel.min.js |
<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.
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.
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 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',
})
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)
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()
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()
- Newest two browser versions of Chrome, Firefox, Safari and Edge
- IE 10 and IE 11
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.
© 2018 Manuel Sommerhalder Released under the MIT LICENSE