Skip to main content

Patterns

Accordion

The Accordion Component is a block of content with a header. With JavaScript enabled, the Accordion Component will toggle open or closed using the Toggle JavaScript Utility. All of the same accessible attribute toggling functionality the Toggle Utility provides will apply (aria-controls, aria-expanded, and aria-hidden). Without JavaScript enabled or within print views, it will remain open.

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.

Free tax prep for New YorkersNYC Free Tax Prep

NYC Department of Consumer Affairs

If you earned $64,000 or less last tax year, the City can help you file your taxes for free. You can file online or, if you make under $54,000, you can file in person.

Apply in person

There are more than 200 NYC Free Tax Prep sites in all five boroughs that can help you file for free.

Learn More

<article class="c-accordion">
  <header class="c-accordion__header color-dark-background">
    <p id="aria-lb-what-you-need-to-include"><span>Free tax prep for New Yorkers</span><em class="block font-normal">NYC Free Tax Prep</em></p><button aria-controls="aria-c-what-you-need-to-include" aria-expanded="true" class="c-accordion__toggle print:hidden active" data-js="accordion"><span class="c-accordion__toggle-active">hide this list</span><span class="c-accordion__toggle-inactive">show this list</span></button>
  </header>
  <div aria-hidden="false" aria-labelledby="aria-lb-what-you-need-to-include" class="c-accordion__body color-mid-background print:active hidden:overflow animated active" id="aria-c-what-you-need-to-include" role="region">
    <div class="c-accordion__padding">
      <p class="text-color-blue">NYC Department of Consumer Affairs</p>
      <p>If you earned $64,000 or less last tax year, the City can help you file your taxes for free. You can file online or, if you make under $54,000, you can file in person.</p>
      <h4>Apply in person</h4>
      <p>There are more than 200 NYC Free Tax Prep sites in all five boroughs that can help you file for free.</p>
      <p class="print:hidden"><a class="btn btn-secondary btn-next btn-small" href="#">Learn More</a></p>
    </div>
  </div>
</article>

Global Script

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

<!-- Global Script -->
<script src="dist/scripts/access-nyc.js"></script>

<script>
  var access = new AccessNyc();
  access.accordion();
</script>

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

Module

The ES6, CommonJS, and IFFE modules all require importing and object instantiation in your main script:

// ES6
import Filter from 'src/components/accordion/accordion';

// CommonJS
let Filter = require('dist/components/accordion/accordion.common');

<!-- IFFE -->
<script src="dist/components/accordion/accordion.iffe.js"></script>

new Accordion();

The component requires the data-js="accordion" attribute and a unique ID targeting the Accordion body, on the toggling element, in order to function.

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.