Basic Accessible Accordion Plugin For jQuery

This is a simple, small jQuery plugin which enables you to create configurable, WAI-ARIA compliant accordion systems from plain, semantic html markups.

The Vanilla JS Version is now available.

Installation:

# NPM
$ npm install jquery-accessible-accordion-aria --save

# Bower
$ bower install jquery-accessible-accordion-aria --save

Basic usage:

1. Put jQuery JavaScript library and the jquery-accessible-accordion-aria.js script right before the closing body tag.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery-accessible-accordion-aria.js"></script>

2. The example HTML structure for the accordion system.

<div id="accordion_0" class="js-accordion">
  <div class="js-accordion__panel">
    <h2 class="js-accordion__header">First tab</h2>
    here the content of 1st tab<br><br>
    <a href="#">pweet</a><br><br>
    plop
  </div>
  <div class="js-accordion__panel">
    <h2 class="js-accordion__header">Second tab</h2>
    here the content of 2nd tab<br><br>
    <a href="#">pweet</a><br><br>
    plop
  </div>
  <div class="js-accordion__panel">
    <h2 class="js-accordion__header">Third tab</h2>
    here the content of 3rd tab<br><br>
    plop
  </div>
  <div class="js-accordion__panel">
    <h2 class="js-accordion__header">Fourth tab</h2>
    here the content of 4th tab<br><br>
    <a href="#">pweet</a><br><br>
    plop
  </div>
</div>

3. Initialize the plugin to generate a basic accordion system.

$('.js-accordion').accordion();

4. Free free to style the accordion system whatever you like.

.js-accordion__panel[aria-hidden=true] { display: none; }

.js-accordion__panel[role="tabpanel"] .js-accordion__header { display: none; }

button.js-accordion__header { display: block; }

.js-accordion__header[aria-expanded="true"]:before { content: "- "; }

.js-accordion__header[aria-expanded="false"]:before { content: "+ "; }

.js-accordion__header[aria-selected="true"]:after { content: " (selected)"; }

.js-accordion__header[aria-selected="false"]:after { content: " (unselected)"; }

5. All default configuration options.

$('.js-accordion').accordion({
  headersSelector: '.js-accordion__header',
  panelsSelector: '.js-accordion__panel',
  buttonsSelector: 'button.js-accordion__header',
  buttonsGeneratedContent: 'text',
  button: $('<button></button>', {
      class: 'js-accordion__header',
      type: 'button'
  }),
  buttonSuffixId: '_tab',
  multiselectable: true,
  prefixClass: 'accordion',
  headerSuffixClass: '__title',
  buttonSuffixClass: '__header',
  panelSuffixClass: '__panel',
  direction: 'ltr',
  accordionPrefixId: 'accordion'
});

Changelog:

2019-05-30

• Hotfix: removed non-used method

2018-01-02

• JS Update

---

This awesome jQuery plugin is developed by nico3333fr. For more Advanced Usages, please check the demo page or visit the official website.