FEC Pattern Library

Accordions

Accordions are collapsible panels that provide users with the ability to expand and collapse content as needed. They can simplify the interface by hiding content until it is needed.

When to use

  • Users only need a few specific pieces of content within a page.
  • Information needs to be displayed in a small space.

When to consider something else

  • If visitors need to see most or all of the information on a page. Use well-formatted text instead.
  • If there is not enough content to warrant condensing. Accordions increase cognitive load and interaction cost, as users have to make decisions about what headers to click on.

Guidance from the U.S. Web Design System

  • Allow users to click anywhere in the header area to expand or collapse the content; a larger target is easier to manipulate.
  • Make sure interactive elements within the collapsible region are far enough from the headers that users don’t accidentally trigger a collapse. (The exact distance depends on the device.)

GitHub issues

<div class="main">
    <div class="slab slab--neutral">
        <div class="container">
            <ul class="js-accordion" data-content-prefix="first">
                <li>
                    <button class="accordion__button">
                        First Amendment
                    </button>
                    <div class="accordion__content">
                        <p>
                            Congress shall make no law respecting an establishment of religion, or prohibiting the free exercise thereof; or abridging the freedom of speech, or of the press; or the right of the people peaceably to assemble, and to petition the Government for a redress of grievances.
                        </p>
                    </div>
                </li>
                <li>
                    <button class="accordion__button">
                        Second Amendment
                    </button>
                    <div class="accordion__content">
                        <p>
                            A well regulated Militia, being necessary to the security of a free State, the right of the people to keep and bear Arms, shall not be infringed.
                        </p>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>
 
<div class="main">
  <div class="slab slab--neutral">
    <div class="container">
      <ul class="js-accordion" data-content-prefix="first">
        <li>
          <button class="accordion__button">
            First Amendment
          </button>
          <div class="accordion__content">
            <p>
            Congress shall make no law respecting an establishment of religion, or prohibiting the free exercise thereof; or abridging the freedom of speech, or of the press; or the right of the people peaceably to assemble, and to petition the Government for a redress of grievances.
            </p>
          </div>
        </li>
        <li>
          <button class="accordion__button">
            Second Amendment
          </button>
          <div class="accordion__content">
            <p>
            A well regulated Militia, being necessary to the security of a free State, the right of the people to keep and bear Arms, shall not be infringed.
            </p>
          </div>
        </li>
      </ul>
    </div>
  </div>
</div>
 
/* No context defined. */