Skip to content


Switch branches/tags

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time


NPM version Dependencies Build Status Coding Style MIT License

Accessible W3C conform accordion written in ES6. Handorgel is the Swiss German name for accordion.

Visit the demo


  • ARIA accessible
  • Keyboard interaction
  • Extensive API
  • Animated collapsing
  • Fully customizable via CSS
  • No external dependencies
  • Lightweight (~3kb minified and gziped)


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



<div class="handorgel">
  <h3 class="handorgel__header">
    <button class="handorgel__header__button">
  <div class="handorgel__content" data-open>
    <div class="handorgel__content__inner">
      Content openened by default
  <h3 class="handorgel__header">
    <button class="handorgel__header__button">
      Title 2
  <div class="handorgel__content">
    <div class="handorgel__content__inner">
      Content closed by default



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'fold:open', fn)


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.


var accordion = new handorgel(document.querySelector('.handorgel'))

// 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.


var accordion = new handorgel(document.querySelector('.handorgel'))

// close first fold

Browser compatibility

  • 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

Buy Me A Coffee


No releases published


No packages published