Accordion | UCLA Design System

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 is-open">
    <h4 class="accordion__heading">
      <button
        type="button"
        class="accordion__heading-button"
        aria-expanded="true"
      >
        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__body">
      <div
        class="accordion__content"
        tabindex="0"
      >
        <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>
  <div class="accordion-item">
    <h4 class="accordion__heading">
      <button
        type="button"
        class="accordion__heading-button"
        aria-expanded="false"
      >
        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__body">
      <div
        class="accordion__content"
        tabindex="0"
      >
        <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>
  <div class="accordion-item">
    <h4 class="accordion__heading">
      <button
        type="button"
        class="accordion__heading-button"
        aria-expanded="false"
      >
        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__body">
      <div
        class="accordion__content"
        tabindex="0"
      >
        <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>

<div class="accordion is-multiselect">
  <div class="accordion-item">
    <h4 class="accordion__heading">
      <button
        type="button"
        class="accordion__heading-button"
        aria-expanded="true"
      >
        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__body">
      <div class="accordion__content">
        <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>
  <div class="accordion-item">
    <h4 class="accordion__heading">
      <button
        type="button"
        class="accordion__heading-button"
        aria-expanded="false"
      >
        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__body">
      <div class="accordion__content">
        <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>
  <div class="accordion-item">
    <h4 class="accordion__heading">
      <button
        type="button"
        class="accordion__heading-button"
        aria-expanded="false"
      >
        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__body">
      <div class="accordion__content">
        <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>

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 Body & Content

An element with the class .accordion__body needs to be the Accordion Title sibling. The .accordion__content 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__body">
            <div class="accordion__content">
                <p>Lorem Ipsum</p>
            </div>
        </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.

Royce Hall is a building on the campus of the University of California, Los Angeles. Designed by the Los Angeles firm of Allison & 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.

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.

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.

<div class="accordion">
  <div class="accordion-item is-open">
    <h4 class="accordion__heading">
      <button
        type="button"
        class="accordion__heading-button"
        aria-expanded="true"
      >
        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__body">
      <div
        class="accordion__content"
        tabindex="0"
      >
        <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>
  <div class="accordion-item">
    <h4 class="accordion__heading">
      <button
        type="button"
        class="accordion__heading-button"
        aria-expanded="false"
      >
        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__body">
      <div
        class="accordion__content"
        tabindex="0"
      >
        <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>
  <div class="accordion-item">
    <h4 class="accordion__heading">
      <button
        type="button"
        class="accordion__heading-button"
        aria-expanded="false"
      >
        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__body">
      <div
        class="accordion__content"
        tabindex="0"
      >
        <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>

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"
        aria-expanded="true"
      >
        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__body">
      <div class="accordion__content">
        <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>
  <div class="accordion-item">
    <h4 class="accordion__heading">
      <button
        type="button"
        class="accordion__heading-button"
        aria-expanded="false"
      >
        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__body">
      <div class="accordion__content">
        <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>
  <div class="accordion-item">
    <h4 class="accordion__heading">
      <button
        type="button"
        class="accordion__heading-button"
        aria-expanded="false"
      >
        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__body">
      <div class="accordion__content">
        <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>

JavaScript

Methods

open(panelID)

Opens the accordion item with the ID value of .accordion__content.

const accordion = document.querySelector('your accordion');
accordion.open('your accordion panel ID')

close(panelID)

Closes the accordion item with the ID value of .accordion__content.

const accordion = document.querySelector('your accordion');
accordion.close('your accordion panel ID')

Events

bruinAccordionOpen

Emits when an accordion panel is opened.

document.addEventListener('bruinAccordionOpen', function(event) {
    // Your JavaScript here
})

bruinAccordionClose

Emits when an accordion panel is closed.

document.addEventListener('bruinAccordionClose', function(event) {
    // Your JavaScript here
})