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.
<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 --> <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.
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.