Accordion

An accordion is a group of collapsible panels where opening one automatically closes the others. Bootstrap 4 has no dedicated accordion component class — you build it yourself out of pieces you already know: .card for each panel and .collapse for the show/hide behavior, tied together with one extra attribute. We'll build a FAQ accordion for TrailMap this way.

No Dedicated .accordion Class in Bootstrap 4

Unlike Bootstrap 5, which ships real .accordion/.accordion-item/.accordion-button classes purpose-built for this pattern, Bootstrap 4 gives you nothing named "accordion" at all. The look and behavior come entirely from stacking .card elements and wiring each one's body to a .collapse panel, the same Collapse mechanism from the last lesson.

Building Blocks: .card + .collapse + data-parent

Each panel is a .card. Its header holds a button with data-toggle="collapse" and data-target, same as any Collapse trigger. The new piece is data-parent on the collapsible .collapse element — it points at the accordion's outer container, and tells Bootstrap "when I open, close every other panel inside that container."

<div id="faqAccordion">
  <div class="card">
    <div class="card-header">
      <button class="btn btn-link" data-toggle="collapse" data-target="#faqOne">
        Question one
      </button>
    </div>
    <div id="faqOne" class="collapse" data-parent="#faqAccordion">
      <div class="card-body">Answer one</div>
    </div>
  </div>
</div>

Worked Example: TrailMap FAQ Accordion

Here's a three-question FAQ accordion for TrailMap's help page, built entirely from cards and collapse panels sharing one data-parent container.

<div id="trailFaqAccordion">

  <div class="card">
    <div class="card-header" id="faqHeadingOne">
      <button class="btn btn-link" data-toggle="collapse" data-target="#faqOne">
        How accurate is trail difficulty?
      </button>
    </div>
    <div id="faqOne" class="collapse show" data-parent="#trailFaqAccordion">
      <div class="card-body">Difficulty is set by trail submitters and reviewed by moderators against elevation gain and distance.</div>
    </div>
  </div>

  <div class="card">
    <div class="card-header" id="faqHeadingTwo">
      <button class="btn btn-link" data-toggle="collapse" data-target="#faqTwo">
        Can I submit a trail without GPS data?
      </button>
    </div>
    <div id="faqTwo" class="collapse" data-parent="#trailFaqAccordion">
      <div class="card-body">Yes, but trails with a GPS track get approved faster and show a map preview.</div>
    </div>
  </div>

  <div class="card">
    <div class="card-header" id="faqHeadingThree">
      <button class="btn btn-link" data-toggle="collapse" data-target="#faqThree">
        How do I report an unsafe trail?
      </button>
    </div>
    <div id="faqThree" class="collapse" data-parent="#trailFaqAccordion">
      <div class="card-body">Use the "Report" link on the trail page — moderators review reports within 24 hours.</div>
    </div>
  </div>

</div>

What Changes in Bootstrap 5

This DIY-from-cards approach is exactly what Bootstrap 5 changed. Bootstrap 5 introduced real, dedicated accordion classes — .accordion, .accordion-item, .accordion-header, and .accordion-button — so you no longer reach for .card at all. The underlying show/one-panel-open behavior is the same idea; only the markup and class names are purpose-built rather than borrowed from Cards.