Package Exports
- handorgel
- handorgel/lib/js/esm/handorgel
- handorgel/lib/js/esm/handorgel.js
- handorgel/lib/js/umd/handorgel.js
- handorgel/src/js/fold
- handorgel/src/js/fold.js
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (handorgel) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
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.