Modern Accessible Accordion In JavaScript (ES6) – Handorgel

Handorgel is a simple yet modern, customizable, SEO-friendly, WAI-ARIA compliant accordion (tablist) library written in ES6.

Features:

• Auto adds Aria states to your accordion via JavaScript.
• Keyboard interactions.
• Semantic markup.
• Smooth slideUp & slideDown animations based on CSS3 transitions.
• Useful events & API methods.

How to use it:

1. Install & download.

# Yarn
$ yarn add handorgel
# NPM
$ npm install handorgel --save

2. Load the umd version of the Handorgel in the document.

<link href="lib/css/handorgel.css" rel="stylesheet">
<script src="lib/js/umd/handorgel.js"></script>

3. Add as many panels to the accordion interface following the markup structure like these:

• autofocus: auto set the focus to this accordion header on page load.
• data-open: make this accordion content visible on page load.

<div class="handorgel">
  <h3 class="handorgel__header">
    <button class="handorgel__header__button" autofocus>
      Title 1
    </button>
  </h3>
  <div class="handorgel__content">
    <div class="handorgel__content__inner">
      Content 1
    </div>
  </div>
  <h3 class="handorgel__header">
    <button class="handorgel__header__button">
      Title 2
    </button>
  </h3>
  <div class="handorgel__content" data-open>
    <div class="handorgel__content__inner">
      Content 2
    </div>
  </div>
  
  <h3 class="handorgel__header">
    <button class="handorgel__header__button">
      Title 3
    </button>
  </h3>
  <div class="handorgel__content">
    <div class="handorgel__content__inner">
      Content 3
    </div>
  </div>
</div>

4. Initialize the accordion with default settings. That’s it.

const myAccordion = new handorgel(document.querySelector('.handorgel'))

5. Determine whether or not to allow multiple accordion panels to open at once.

const myAccordion = new handorgel(document.querySelector('.handorgel'),{
      multiSelectable: true
})

6. Config the accessibility of the accordion.

const myAccordion = new handorgel(document.querySelector('.handorgel'),{
      ariaEnabled: true,
      keyboardInteraction: true,
      carouselFocus: true, // loop header focus
      initialOpenAttribute: 'data-open'
      
})

7. Config the transition effect.

const myAccordion = new handorgel(document.querySelector('.handorgel'),{
      initialOpenTransition: true,
      initialOpenTransitionDelay: 200
})

8. Default CSS classes.

const myAccordion = new handorgel(document.querySelector('.handorgel'),{
      headerOpenClass: 'handorgel__header--open',
      contentOpenClass: 'handorgel__content--open',
      headerOpenedClass: 'handorgel__header--opened',
      contentOpenedClass: 'handorgel__content--opened',
      headerDisabledClass: 'handorgel__header--disabled',
      contentDisabledClass: 'handorgel__content--disabled',
      headerFocusClass: 'handorgel__header--focus',
      contentFocusClass: 'handorgel__content--focus',
      headerNoTransitionClass: 'handorgel__header--notransition',
      contentNoTransitionClass: 'handorgel__content--notransition'
})

9. API methods to control the accordion.

// update
myAccordion.update()
// resize the accordion with or without transitions
myAccordion.resize();
myAccordion.resize(true);
// set focus
myAccordion.focus(next);
myAccordion.focus(previous);
myAccordion.focus(first);
myAccordion.focus(last);
// destroy the instance
myAccordion.destroy();
// open accordion 1 with or without transitions
myAccordion.folds[0].open();
myAccordion.folds[0].open(false);
// close accordion 1 with or without transitions
myAccordion.folds[0].close();
myAccordion.folds[0].close(false);
// toggle accordion 1 with or without transitions
myAccordion.folds[0].toggle();
myAccordion.folds[0].toggle(false);
// toggle accordion 1 with or without transitions
myAccordion.folds[0].resize();
myAccordion.folds[0].toggle(true);
// enable/disable
myAccordion.folds[0].disable();
myAccordion.folds[0].enable();
// set focus to accordion 1
myAccordion.folds[0].focus();
// remove focus from accordion 1
myAccordion.folds[0].blur();
// destroy
myAccordion.folds[0].destroy();

10. Event listeners.

myAccordion.on(EVENT, (fold) => {
  // ...
})
myAccordion.once(EVENT, (fold) => {
  // ...
})
myAccordion.off(EVENT, fn)
myAccordion.on('fold:open', (fold) => {
  // ...
})
myAccordion.on('fold:opened', (fold) => {
  // ...
})
myAccordion.on('fold:close', (fold) => {
  // ...
})
myAccordion.on('fold:closed', (fold) => {
  // ...
})
myAccordion.on('fold:focus', (fold) => {
  // ...
})
myAccordion.on('fold:blur', (fold) => {
  // ...
})
myAccordion.on('destroy', () => {
  // ...
})
myAccordion.on('destroyed', () => {
  // ...
})