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

CDN / Download

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

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

Example:

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

HandorgelFold Class

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