Accordion

Collapsible content panels with headers

Accordions organize content into collapsible panels. Click headers to expand or collapse sections.

Wrap collapsible panels in .accordion. Each item has .accordion-header with a button and .accordion-body for content. Only one panel opens at a time by default.

<div class="accordion" id="myAccordion">
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button"
        data-bs-toggle="collapse"
        data-bs-target="#collapseOne">
        Item #1
      </button>
    </h2>
    <div id="collapseOne"
      class="accordion-collapse collapse show">
      <div class="accordion-body">
        Content here.
      </div>
    </div>
  </div>
</div>

Install Bootstrap via npm or CDN. Include the CSS and JS bundles in your project.

.accordion

Click a header to expand it. Only one panel opens at a time.

19 / 37