Accordion

Display content in a compact manner. Accordions provide a space-saving technique for displaying content in your viewport. Users can explore an overview of topics and then expand accordions as needed to see more information.

When to use

Use accordions only when information doesn’t need to be immediately visible, and you believe additional information will overwhelm users. Use accordions to a greater extent on mobile devices to help reduce scrolling.

Anatomy

1. Title (required)

Entire header is selectable. Allow users to click anywhere in the header area to expand or collapse the content; a larger target is easier to manipulate.

2. Container (required)

3. Arrow Icon (required)

Default/closed state is arrow down. Toggles to arrow up on expansion.

4. Content (required)

Accordions can accommodate of variety of content types. 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.)

Example

<div class="accordion">
  <div class="accordion-item">
    <h4 class="accordion__heading">
      <button
        type="button"
        class="accordion__heading-button"
        id="accordionOneButton"
        aria-expanded="true"
        aria-controls="accordionOne"
      >
        Royce Hall
        <svg
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M18 9.41L16.59 8L12 12.58L7.41 8L6 9.41L12 15.41L18 9.41Z"
            fill="#333333"
          />
        </svg>
      </button>
    </h4>
    <div
      aria-labelledby="accordionOneButton"
      class="accordion__content"
      id="accordionOne"
    >
      <p>
        Royce Hall is a building on the campus of the University of California,
        Los Angeles. Designed by the Los Angeles firm of Allison &amp; Allison
        and completed in 1929, it is one of the four original buildings on
        UCLA's Westwood campus and has come to be the defining image of the
        university.
      </p>
    </div>
  </div>
  <div class="accordion-item">
    <h4 class="accordion__heading">
      <button
        type="button"
        class="accordion__heading-button"
        id="accordionTwoButton"
        aria-expanded="false"
        aria-controls="accordionTwo"
      >
        Fowler Museum
        <svg
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M18 9.41L16.59 8L12 12.58L7.41 8L6 9.41L12 15.41L18 9.41Z"
            fill="#333333"
          />
        </svg>
      </button>
    </h4>
    <div
      class="accordion__content"
      aria-labelledby="accordionTwoButton"
      id="accordionTwo"
    >
      <p>
        The Fowler Museum at UCLA, commonly known as The Fowler, and formerly
        Museum of Cultural History and Fowler Museum of Cultural History, is a
        museum on the campus of the University of California, Los Angeles (UCLA)
        which explores art and material culture primarily from Africa, Asia and
        the Pacific, and the Americas, past and present.
      </p>
    </div>
  </div>
  <div class="accordion-item">
    <h4 class="accordion__heading">
      <button
        type="button"
        class="accordion__heading-button"
        id="accordionThreeButton"
        aria-expanded="false"
        aria-controls="accordionThree"
      >
        Luskin Conference Center
        <svg
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M18 9.41L16.59 8L12 12.58L7.41 8L6 9.41L12 15.41L18 9.41Z"
            fill="#333333"
          />
        </svg>
      </button>
    </h4>
    <div
      aria-labelledby="accordionThreeButton"
      class="accordion__content"
      id="accordionThree"
    >
      <p>
        The UCLA Meyer and Renee Luskin School of Public Affairs, commonly known
        as the UCLA Luskin School of Public Affairs, is the public
        affairs/public service graduate school at the University of California,
        Los Angeles. The school consists of three graduate departments—Public
        Policy, Social Welfare, and Urban Planning—and an undergraduate program
        in Public Affairs that began accepting students in 2018. In all, the
        school offers three undergraduate minors, the undergraduate major, three
        master's degrees, and two doctoral degrees.
      </p>
    </div>
  </div>
</div>

<div class="accordion is-multiselect">
  <div class="accordion-item">
    <h4 class="accordion__heading">
      <button
        type="button"
        class="accordion__heading-button"
        id="accordionTwoOneButton"
        aria-expanded="true"
        aria-controls="accordionTwoOne"
      >
        Royce Hall
        <svg
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M18 9.41L16.59 8L12 12.58L7.41 8L6 9.41L12 15.41L18 9.41Z"
            fill="#333333"
          />
        </svg>
      </button>
    </h4>
    <div class="accordion__content" id="accordionTwoOne">
      <p>
        Royce Hall is a building on the campus of the University of California,
        Los Angeles. Designed by the Los Angeles firm of Allison &amp; Allison
        and completed in 1929, it is one of the four original buildings on
        UCLA's Westwood campus and has come to be the defining image of the
        university.
      </p>
    </div>
  </div>
  <div class="accordion-item">
    <h4 class="accordion__heading">
      <button
        type="button"
        class="accordion__heading-button"
        aria-expanded="false"
        aria-controls="accordionTwoTwo"
      >
        Fowler Museum
        <svg
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M18 9.41L16.59 8L12 12.58L7.41 8L6 9.41L12 15.41L18 9.41Z"
            fill="#333333"
          />
        </svg>
      </button>
    </h4>
    <div class="accordion__content" id="accordionTwoTwo">
      <p>
        The Fowler Museum at UCLA, commonly known as The Fowler, and formerly
        Museum of Cultural History and Fowler Museum of Cultural History, is a
        museum on the campus of the University of California, Los Angeles (UCLA)
        which explores art and material culture primarily from Africa, Asia and
        the Pacific, and the Americas, past and present.
      </p>
    </div>
  </div>
  <div class="accordion-item">
    <h4 class="accordion__heading">
      <button
        type="button"
        class="accordion__heading-button"
        aria-expanded="false"
        aria-controls="accordionTwoThree"
      >
        Luskin Conference Center
        <svg
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M18 9.41L16.59 8L12 12.58L7.41 8L6 9.41L12 15.41L18 9.41Z"
            fill="#333333"
          />
        </svg>
      </button>
    </h4>
    <div class="accordion__content" id="accordionTwoThree">
      <p>
        The UCLA Meyer and Renee Luskin School of Public Affairs, commonly known
        as the UCLA Luskin School of Public Affairs, is the public
        affairs/public service graduate school at the University of California,
        Los Angeles. The school consists of three graduate departments—Public
        Policy, Social Welfare, and Urban Planning—and an undergraduate program
        in Public Affairs that began accepting students in 2018. In all, the
        school offers three undergraduate minors, the undergraduate major, three
        master's degrees, and two doctoral degrees.
      </p>
    </div>
  </div>
</div>

The container element for the accordion needs to have the .accordion class. We used <div> for demonstration purposes but you can use any element you prefer.

<div class="accordion"></div>

Inside the .accordion, child elements with the .accordion-item must be placed to hold the content. To have an .accordion-item open by default, add the .is-open class to it.

Accordion Title

For branding purposes, we suggest you add an element with the class .accordion__heading inside the .accordion-item. This is what applies the styling for the Design System.

A <button> with the class .accordion__heading-button should be placed inside the .accordion__heading with a corresponding arrow svg. This element is what triggers the content to expand or collapse.

Accordion Content

An element with the class .accordion__content needs to be the Accordion Title sibling. This will hold the content you are going to display/hide when the Title is clicked.

<div class="accordion">
    <div class="accordion-item is-open">
        <!-- Accordion Title -->
        <h4 class="accordion__heading">
            <button class="accordion__heading-button">
                Accordion 1

                <!-- Arrow SVG -->
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M18 9.41L16.59 8L12 12.58L7.41 8L6 9.41L12 15.41L18 9.41Z" fill="#333333"/>
                </svg>
            <button>
        </h4>
        <!-- Accordion Content -->
        <div class="accordion__content">
            <p>Lorem Ipsum</p>
        </div>
    </div>
    <!-- ... -->
</div>

Once the accordion is constructed, it should look like the example below.

Note: we strongly recommend adding aria-expanded, aria-controls to the <button> and aria-labelledby to the Accordion Content for accessibility purposes.

<div class="accordion">
  <div class="accordion-item">
    <h4 class="accordion__heading">
      <button
        type="button"
        class="accordion__heading-button"
        id="accordionOneButton"
        aria-expanded="true"
        aria-controls="accordionOne"
      >
        Royce Hall
        <svg
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M18 9.41L16.59 8L12 12.58L7.41 8L6 9.41L12 15.41L18 9.41Z"
            fill="#333333"
          />
        </svg>
      </button>
    </h4>
    <div
      aria-labelledby="accordionOneButton"
      class="accordion__content"
      id="accordionOne"
    >
      <p>
        Royce Hall is a building on the campus of the University of California,
        Los Angeles. Designed by the Los Angeles firm of Allison &amp; Allison
        and completed in 1929, it is one of the four original buildings on
        UCLA's Westwood campus and has come to be the defining image of the
        university.
      </p>
    </div>
  </div>
  <div class="accordion-item">
    <h4 class="accordion__heading">
      <button
        type="button"
        class="accordion__heading-button"
        id="accordionTwoButton"
        aria-expanded="false"
        aria-controls="accordionTwo"
      >
        Fowler Museum
        <svg
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M18 9.41L16.59 8L12 12.58L7.41 8L6 9.41L12 15.41L18 9.41Z"
            fill="#333333"
          />
        </svg>
      </button>
    </h4>
    <div
      class="accordion__content"
      aria-labelledby="accordionTwoButton"
      id="accordionTwo"
    >
      <p>
        The Fowler Museum at UCLA, commonly known as The Fowler, and formerly
        Museum of Cultural History and Fowler Museum of Cultural History, is a
        museum on the campus of the University of California, Los Angeles (UCLA)
        which explores art and material culture primarily from Africa, Asia and
        the Pacific, and the Americas, past and present.
      </p>
    </div>
  </div>
  <div class="accordion-item">
    <h4 class="accordion__heading">
      <button
        type="button"
        class="accordion__heading-button"
        id="accordionThreeButton"
        aria-expanded="false"
        aria-controls="accordionThree"
      >
        Luskin Conference Center
        <svg
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M18 9.41L16.59 8L12 12.58L7.41 8L6 9.41L12 15.41L18 9.41Z"
            fill="#333333"
          />
        </svg>
      </button>
    </h4>
    <div
      aria-labelledby="accordionThreeButton"
      class="accordion__content"
      id="accordionThree"
    >
      <p>
        The UCLA Meyer and Renee Luskin School of Public Affairs, commonly known
        as the UCLA Luskin School of Public Affairs, is the public
        affairs/public service graduate school at the University of California,
        Los Angeles. The school consists of three graduate departments—Public
        Policy, Social Welfare, and Urban Planning—and an undergraduate program
        in Public Affairs that began accepting students in 2018. In all, the
        school offers three undergraduate minors, the undergraduate major, three
        master's degrees, and two doctoral degrees.
      </p>
    </div>
  </div>
</div>

Multi-open Accordion

By default, the accordion will only open one panel at a time. If you would like to open multiple panels without the other one closing, simply add the .is-multiselect class to the .accordion element.

<div class="accordion is-multiselect">
  <div class="accordion-item">
    <h4 class="accordion__heading">
      <button
        type="button"
        class="accordion__heading-button"
        id="accordionTwoOneButton"
        aria-expanded="true"
        aria-controls="accordionTwoOne"
      >
        Royce Hall
        <svg
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M18 9.41L16.59 8L12 12.58L7.41 8L6 9.41L12 15.41L18 9.41Z"
            fill="#333333"
          />
        </svg>
      </button>
    </h4>
    <div class="accordion__content" id="accordionTwoOne">
      <p>
        Royce Hall is a building on the campus of the University of California,
        Los Angeles. Designed by the Los Angeles firm of Allison &amp; Allison
        and completed in 1929, it is one of the four original buildings on
        UCLA's Westwood campus and has come to be the defining image of the
        university.
      </p>
    </div>
  </div>
  <div class="accordion-item">
    <h4 class="accordion__heading">
      <button
        type="button"
        class="accordion__heading-button"
        aria-expanded="false"
        aria-controls="accordionTwoTwo"
      >
        Fowler Museum
        <svg
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M18 9.41L16.59 8L12 12.58L7.41 8L6 9.41L12 15.41L18 9.41Z"
            fill="#333333"
          />
        </svg>
      </button>
    </h4>
    <div class="accordion__content" id="accordionTwoTwo">
      <p>
        The Fowler Museum at UCLA, commonly known as The Fowler, and formerly
        Museum of Cultural History and Fowler Museum of Cultural History, is a
        museum on the campus of the University of California, Los Angeles (UCLA)
        which explores art and material culture primarily from Africa, Asia and
        the Pacific, and the Americas, past and present.
      </p>
    </div>
  </div>
  <div class="accordion-item">
    <h4 class="accordion__heading">
      <button
        type="button"
        class="accordion__heading-button"
        aria-expanded="false"
        aria-controls="accordionTwoThree"
      >
        Luskin Conference Center
        <svg
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M18 9.41L16.59 8L12 12.58L7.41 8L6 9.41L12 15.41L18 9.41Z"
            fill="#333333"
          />
        </svg>
      </button>
    </h4>
    <div class="accordion__content" id="accordionTwoThree">
      <p>
        The UCLA Meyer and Renee Luskin School of Public Affairs, commonly known
        as the UCLA Luskin School of Public Affairs, is the public
        affairs/public service graduate school at the University of California,
        Los Angeles. The school consists of three graduate departments—Public
        Policy, Social Welfare, and Urban Planning—and an undergraduate program
        in Public Affairs that began accepting students in 2018. In all, the
        school offers three undergraduate minors, the undergraduate major, three
        master's degrees, and two doctoral degrees.
      </p>
    </div>
  </div>
</div>