Simple Accessible Accordion In Vanilla JS - A11y-Accordion

A11y-Accordion is a progressive enhancement JQuery Vanilla JavaScript plugin that adds keyboard navigation and WAI-ARIA roles to your accordion to make it more accessible for keyboard and screen reader users. 

Lightweight, simple-to-use, and easy to customize via data attributes, without any JS call.

How to use it:

1. Download and load the A11y-Accordion's JavaScript and CSS files in the HTML file.

<link rel="stylesheet" href="css/aria.accordion.css" />
<script src="js/aria.accordion.min.js"></script>

2. Add the tabs and panels to the accordion using the following data attributes:

• data-aria-accordion: accordion container
• data-transition: applies CSS transitions to accordion panels
• data-multi: allows to open multiple panels
• data-default: shows a panel on page load
• data-constant: makes this panel always be opened

<div data-aria-accordion
     data-multi
     data-transition
     data-default="none"
     id="accGen">

  <h3 data-aria-accordion-heading>
    Chapter 1
  </h3>
  <div data-aria-accordion-panel>
    <p>
      Here is the first panel of content.
    </p>
    <p>
      This particular accordion example can have multiple opened panels at a time, or every panel closed.
    </p>
  </div>

  <h3 data-aria-accordion-heading>
    Chapter 2
  </h3>
  <div data-aria-accordion-panel>
    <p>
      By using the <code>data-multi</code> attribute, multiple
      panels can be opened at once.
    </p>
  </div>

  <h3 data-aria-accordion-heading>
    Chapter 3
  </h3>
  <div data-aria-accordion-panel>
    <p>
      The <code>data-default="none"</code> attribute is used to
      indicate that no panel will be open by default, when the
      accordion is initially rendered.
    </p>
  </div>

</div>

Changelog:

2020-02-11

• Now the plugin works with vanilla JavaScript
• Doc updated

2016-05-03

• JS update

---

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