Accessible Accordion Plugin In Pure JavaScript – AriaAccordion

Preview:

Description:

AriaAccordion is a vanilla JavaScript plugin to generate a fully accessible accordion widget on the webpage.

Based on ARIA Design Pattern for accordions and supports nested accordions.

This is the pure JavaScript version of the Accessible Accordion Plugin For jQuery.

Keyboard interactions:

• Up or Left: Move focus on the previous accordion
• Down or Right: Move focus on next accordion
• Home: Move focus on the first accordion
• End: Move focus on the last accordion
• Space or Return: Open/close accordions

How to use it:

Markup the html structure for the accordion.

<div class="aria-accordion">
  <div class="aria-accordion-panel">
    <h3 class="aria-accordion-header">First Accordion</h3>
    Accordion Content 1
  </div>
  <div class="aria-accordion-panel">
    <h3 class="aria-accordion-header">Second Accordion</h3>
    Accordion Content 2
  </div>
  <div class="aria-accordion-panel">
    <h3 class="aria-accordion-header">Third tab</h3>
    Accordion Content 3
  </div>
  ...
</div>

Each accordion container may have the following data attributes:

• data-accordion-open: Open the accordion on init.
• data-accordion-multiselectable: Allows opening multiple accordion panels at a time.
• data-accordion-prefix-class: prefix class

<div class="aria-accordion" data-accordion-multiselectable="true" data-accordion-prefix-class="minimalist-accordion">
  <div class="aria-accordion-panel">
    <h3 class="aria-accordion-header">First Accordion</h3>
    Accordion Content 1
  </div>
  <div class="aria-accordion-panel" data-accordion-open="true">
    <h3 class="aria-accordion-header">Second Accordion</h3>
    Accordion Content 2
  </div>
  <div class="aria-accordion-panel">
    <h3 class="aria-accordion-header">Third tab</h3>
    Accordion Content 3
  </div>
  ...
</div>

The plugin also supports nested accordions.

<div class="aria-accordion-panel">
  <h2 class="aria-accordion-header">Nested tab</h2>
  <p>Content of 2nd tab</p>
  <div class="aria-accordion">
      <div class="aria-accordion-panel">
          <h3 class="aria-accordion-header">First tab</h3>
          <p>Content of 1st tab</p>
      </div>
      <div class="aria-accordion-panel">
          <h3 class="aria-accordion-header">Second tab</h3>
          <p>Content of 2nd tab</p>
      </div>
      <div class="aria-accordion-panel">
          <h3 class="aria-accordion-header">Third tab</h3>
          <p>Content of 3rd tab</p>
      </div>
  </div>
</div>

Include the aria-accordion.js library to initialize the accordion plugin.

<script src="aria-accordion.js"></script>

AriaAccordion.init('.aria-accordion')

Feel free to style the accordion with your own CSS.

.aria-accordion {
  margin: 1em 2em;
  background-color: #DDDDDD;
}
.aria-accordion-header { margin: 0; }
.aria-accordion-panel { margin: 1em 1em 1em 2.3em; }
.aria-accordion-panel[aria-hidden=true] { display: none; }
button.aria-accordion-header {
  display: block !important;
  width: 100%;
  background-color: #005000;
  color: white;
  text-align: left;
  font-size: 130%;
  margin-bottom: 0.1em;
  padding: 0.3em 0.6em;
  border: none;
}
.aria-accordion-header[aria-expanded="true"]:before { content: "⊟ "; }
.aria-accordion-header[aria-expanded="false"]:before { content: "⊞ "; }
.aria-accordion-header[aria-selected="true"]:after {
  content: " → selected";
}
.aria-accordion-header[aria-selected="false"]:after {
  content: " → not selected";
  color: #7F7F7F;
}

Full accordion options.

AriaAccordion.init('.aria-accordion',{
  headersSelector: '.aria-accordion-header',
  panelsSelector: '.aria-accordion-panel',
  buttonsSelector: 'button.aria-accordion-header',
  button: AriaAccordion.defaultButton(),
  buttonSuffixId: '-tab',
  multiselectable: true,
  prefixClass: 'aria-accordion',
  headerSuffixClass: '-title',
  buttonSuffixClass: '-header',
  panelSuffixClass: '-panel',
  direction: 'ltr',
  accordionPrefixId: 'aria-accordion'
})