Handorgel

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

Visit the demo

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.

License

MIT LICENSE