Accordion

The Accordion Component will toggle a region of content open or closed using attributes on the primary toggling element: aria-controls, aria-expanded, and aria-hidden.

When implementing a set of accordions stacked on top of each other, the first accordion should be open when the user lands on the page. Additionally, opening one accordion does not automatically close the other accordions.

Demonstration

Accordion Body Content

Markup

<article class="c-accordion mb-1">
  <header class="c-accordion__header">
    <button aria-controls="aria-c-ca0a6e77d2c92" aria-expanded="true" class="c-accordion__toggle w-full text-start print:hidden active" data-js="accordion">
      <span class="c-accordion__heading mt-0" id="aria-lb-ca0a6e77d2c92">
        <span>New Accordion</span>
      </span>
      <span class="c-accordion__toggle-active">
        <svg aria-hidden="true" class="icon-wnyc-ui">
          <use href="#feather-chevron-down"></use>
        </svg>
        <span class="sr-only">hide this list</span>
      </span>
      <span class="c-accordion__toggle-inactive">
        <svg aria-hidden="true" class="icon-wnyc-ui">
          <use href="#feather-chevron-up"></use>
        </svg>
        <span class="sr-only">show this list</span>
      </span>
    </button>
  </header>
  <div aria-hidden="false" aria-labelledby="aria-lb-ca0a6e77d2c92" class="c-accordion__body print:active hidden:overflow animated active" id="aria-c-ca0a6e77d2c92" role="region">
    <div class="c-accordion__padding">Accordion Body Content</div>
  </div>
</article>

Usage

Global Script

The Accordion Component requires JavaScript for functionality and screen reader accessibility. To use the Accordion in the global script use the following code:

<script src="/dist/scripts/main.js"></script>

<script>
  var patterns = new WorkingNyc();
  patterns.accordion();
</script>

This function will attach the accordion toggling event to the body of the document.

Module

import Accordion from 'src/components/accordion/accordion';

new Accordion();

Polyfills

This script uses the Toggle Utility as a dependency and reqiures the same polyfills for IE11 support. See the “Toggle Usage” section for details on specific methods.