As of January 3rd, 2023 the ACCESS NYC Pattern library package is deprecated in favor of the NYC Opportunity Standard which contains updated user interface elements and usability guidance.
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 Yorkers NYC Free Tax Prep
<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-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 and IFFE modules all require importing and object instantiation in your main script:
// ES6
import Accordion from 'src/components/accordion/accordion';
<!-- 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.