Easy Accessible Accordion Plugin For jQuery - aria-accordion

aria-accordion is a lightweight jQuery plugin which helps you create customizable, accessible accordions with support for auto focus, fade animation, Aria attributes/roles and keyboard interactions.

How to use it:

1. Add references to jQuery library and the aria-accordion plugin's files to the webpage.

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

2. Create the HTML for the accordion interface:

<section class="accordion-group" id="accordion-group-demo">
  <div class="accordion-group__accordion">
    <header class="accordion-group__accordion-head">
      <h3 class="accordion-group__accordion-heading">
        <button type="button" class="accordion-group__accordion-btn">Accordion 1</button></h3>
    </header>
    <div class="accordion-group__accordion-collapse">
      <div class="accordion-group__accordion-content">
        <p>Accordion Content 1</p>
      </div>
    </div>
  </div>
  <div class="accordion-group__accordion">
    <header class="accordion-group__accordion-head">
      <h3 class="accordion-group__accordion-heading">
        <button type="button" class="accordion-group__accordion-btn">Accordion 2</button>
      </h3>
    </header>
    <div class="accordion-group__accordion-collapse">
      <div class="accordion-group__accordion-content">
        <p>Accordion Content 2</p>
      </div>
    </div>
  </div>
  <div class="accordion-group__accordion">
    <header class="accordion-group__accordion-head">
      <h3 class="accordion-group__accordion-heading">
        <button type="button" class="accordion-group__accordion-btn">Accordion 3</button>
      </h3>
    </header>
    <div class="accordion-group__accordion-collapse">
      <div class="accordion-group__accordion-content">
        <p>Accordion Content 3</p>
      </div>
    </div>
  </div>
</section>

3. Call the plugin to create a default accessible accordion.

$('#accordion-group-demo').ariaAccordion();

4. Collapse all accordion panels on page load.

$('#accordion-group-demo').ariaAccordion({
  expandOnPageLoad: false
});

5. Only one accordion panel could be expanded at a time.

$('#accordion-group-demo').ariaAccordion({
  expandOnlyOne: true
});

6. Config the animation speed.

$('#accordion-group-demo').ariaAccordion({
  fadeSpeed: 300
});

7. All default configuration options.

$('#accordion-group-demo').ariaAccordion({
  accGroupIdPrefix: 'accordion-group--',
  accClass: 'accordion-group__accordion',
  headingClass: 'accordion-group__accordion-heading',
  btnClass: 'accordion-group__accordion-btn',
  panelClass: 'accordion-group__accordion-panel',
  contentClass: 'accordion-group__accordion-content',
  contentRole: 'document',
  slideSpeed: 300,
  easing: 'swing',
  cssTransitions: false,
  expandedClass: 'accordion-group__accordion_expanded',
  btnExpandedClass: 'accordion-group__accordion-btn_expanded',
  panelExpandedClass: 'accordion-group__accordion-panel_expanded',
  expandOnPageLoad: true,
  expandOnlyOne: false,
  keyboardNavigation: true
});

Changelog:

2018-09-09

• v2: expand accordions on init

2018-09-09

• v1.5.1

2018-02-24

• v1.5

---

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