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/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 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',

  // header/content class if no transition should be active (applied on resize)
  headerNoTransitionClass: 'handorgel__header--notransition',
  contentNoTransitionClass: 'handorgel__content--notransition'

})

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).
resize	Resize all fold instances.	transition: Whether transition should be active during resizing. (default: false)
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'))

// resize
accordion.resize()

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).
resize	Resize content height.	transition: Whether transition should be active during resizing (default: false).
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
• IE 10 and IE 11

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

© 2018 Manuel Sommerhalder Released under the MIT LICENSE