Accordion

How it works #

The accordion uses the collapse component internally to make it collapsible. We highly recommend reading about that component first in order to understand how the mechanism for expanding/collapsing works for accordion items.

Example #

Given below is an example of an accordion component. Click the accordion items below to expand/collapse the accordion content. Note that by default, the accordion items have their background colors set to transparent (just like tables). You can change this using a background color utility on the .accordion.

<div class="accordion" id="accordion-example-1">
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-1-1" aria-expanded="true" aria-controls="collapse-1-1">
        Accordion item 1
      </button>
    </h2>
    <div id="collapse-1-1" class="accordion-collapse collapse show" data-bs-parent="#accordion-example-1">
      <div class="accordion-body">
        This is the <strong>first item's</strong> accordion body, and it is shown by default.
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-1-2" aria-expanded="false" aria-controls="collapse-1-2">
        Accordion item 2
      </button>
    </h2>
    <div id="collapse-1-2" class="accordion-collapse collapse" data-bs-parent="#accordion-example-1">
      <div class="accordion-body">
        This is the <strong>second item's</strong> accordion body, and it is shown when the appropriate button is clicked.
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-1-3" aria-expanded="false" aria-controls="collapse-1-3">
        Accordion item 3
      </button>
    </h2>
    <div id="collapse-1-3" class="accordion-collapse collapse" data-bs-parent="#accordion-example-1">
      <div class="accordion-body">
        This is the <strong>third item's</strong> accordion body, and it is shown when the appropriate button is clicked.
      </div>
    </div>
  </div>
</div>

Flush #

Add .accordion-flush to remove some borders and rounded corners to render accordions edge-to-edge with their parent container. Here's an example of an edge-to-edge accordion inside of a card component.

<div class="accordion accordion-flush" id="accordion-example-2">
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-2-1" aria-expanded="true" aria-controls="collapse-2-1">
        General:
      </button>
    </h2>
    <div id="collapse-2-1" class="accordion-collapse collapse show" data-bs-parent="#accordion-example-2">
      <div class="accordion-body">
        <strong>Kind:</strong> Markdown<br />
        <strong>Size:</strong> 15,933 bytes (16 KB used)<br />
        <strong>Branch:</strong> <code>main</code>
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-2-2" aria-expanded="false" aria-controls="collapse-2-2">
        Open with:
      </button>
    </h2>
    <div id="collapse-2-2" class="accordion-collapse collapse" data-bs-parent="#accordion-example-2">
      <div class="accordion-body">
        <select class="form-select" aria-label="Open with">
          <option value="Codespaces" selected>Codespaces</option>
          <option value="VS Code">VS Code</option>
        </select>
      </div>
    </div>
  </div>
</div>

Always open #

Omit the data-bs-parent attribute on each .accordion-collapse to make accordion items stay open when another item is opened.

<div class="accordion" id="accordion-example-3">
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-3-1" aria-expanded="true" aria-controls="collapse-3-1">
        Accordion item 1
      </button>
    </h2>
    <div id="collapse-3-1" class="accordion-collapse collapse show">
      <div class="accordion-body">
        This is the <strong>first item's</strong> accordion body, and it is shown by default.
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-3-2" aria-expanded="false" aria-controls="collapse-3-2">
        Accordion item 2
      </button>
    </h2>
    <div id="collapse-3-2" class="accordion-collapse collapse">
      <div class="accordion-body">
        This is the <strong>second item's</strong> accordion body, and it is shown when the appropriate button is clicked.
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-3-3" aria-expanded="false" aria-controls="collapse-3-3">
        Accordion item 3
      </button>
    </h2>
    <div id="collapse-3-3" class="accordion-collapse collapse">
      <div class="accordion-body">
        This is the <strong>third item's</strong> accordion body, and it is shown when the appropriate button is clicked.
      </div>
    </div>
  </div>
</div>

Accessibility #

The animation effect of the accordion component is dependent on the prefers-reduced-motion media query. See the reduced motion section of our accessibility documentation. You can also find more useful information in the collapse accessibility section.