<!-- SASS: src/stylesheets/_components/accordion.scss -->
<!-- JS: src/js/accordion.js -->

<ul class="usa-accordion" aria-multiselectable="true">
    <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>

UX Guidelines

Veteran’s Affairs UX Guide - Accordion

Code Guidance

  • Multiple accordions can be placed on one page. If doing so, be sure to assign unique
    id
    ‘s to all the accordion content areas and use that as the
    aria-controls
    for that content section’s header.