<!-- SASS: src/stylesheets/_components/accordion.scss -->
<!-- JS: src/js/accordion.js -->
<ul class="usa-accordion">
<li>
<button class="usa-accordion-button" aria-expanded="true" aria-controls="a1">Section One</button>
<div id="a1" class="usa-accordion-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis mollitia, ratione asperiores quam impedit, inventore sint accusantium quae, rerum eos tempore reprehenderit provident ex earum, minima fugit repellendus. Velit, sunt!</p>
<button>Button</button>
</div>
</li>
<li>
<button class="usa-accordion-button" aria-expanded="false" aria-controls="a2">Section Two</button>
<div id="a2" class="usa-accordion-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis mollitia, ratione asperiores quam impedit, inventore sint accusantium quae, rerum eos tempore reprehenderit provident ex earum, minima fugit repellendus. Velit, sunt!</p>
<a href="#">Link</a>
</div>
</li>
<li>
<button class="usa-accordion-button" aria-expanded="false" aria-controls="a3">Section Three</button>
<div id="a3" class="usa-accordion-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis mollitia, ratione asperiores quam impedit, inventore sint accusantium quae, rerum eos tempore reprehenderit provident ex earum, minima fugit repellendus. Velit, sunt!</p>
</div>
</li>
<li>
<button class="usa-accordion-button" aria-expanded="false" aria-controls="a4">Section Four</button>
<div id="a4" class="usa-accordion-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis mollitia, ratione asperiores quam impedit, inventore sint accusantium quae, rerum eos tempore reprehenderit provident ex earum, minima fugit repellendus. Velit, sunt!</p>
</div>
</li>
</ul>
Veteran’s Affairs UX Guide - Accordion
id
‘s to all the accordion content areas and use that as the aria-controls
for that content section’s header.