Modern Accessible Accordion In JavaScript (ES6) – Handorgel

Category: Accordion | February 12, 2020
Author:oncode
Views Total:775 views
Official Page:Go to website
Last Update:February 12, 2020
License:MIT

Preview:

Modern Accessible Accordion In JavaScript (ES6) – Handorgel

Description:

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', () => {
  // ...
})

You Might Be Interested In:


Leave a Reply