How to build an accordion or collapse component in Bootstrap?

To create a Bootstrap fold or accordion component, you need to first introduce the CSS and JS files of Bootstrap, and then implement it using data-bs-toggle="collapse" and the correct structure. 1. Include Bootstrap CSS and JS: Introduce style sheets and JavaScript bundle files with Popper via CDN. 2. Create a basic collapse: Use data-bs-toggle="collapse" and data-bs-target to point to the target element ID to achieve button control of the visible and hidden content. 3. Build a complete accordion: wrap multiple collapsed items in a container with class="accordion", each item uses the accordion-item class, set data-bs-toggle="collapse" and data-bs-target on the button, add the accordion-collapse collapse class and point to the parent container ID with data-bs-parent to ensure that only one item is expanded, and set the default expansion item by adding the show class. Key points include ensuring that the ID is unique, using data-bs-parent correctly to prevent multiple openings, and avoiding version confusion. Functions can be achieved without customizing JavaScript. The structure is correct and can run normally. The final effect is to expand the corresponding panel when clicking and the other panels will automatically collapse, completing an interactive accordion component.

Building an according or collapse component in Bootstrap is straightforward — you don't need to write any custom JavaScript because Bootstrap provides built-in functionality using data-bs-toggle="collapse" and proper markup. Here's how to do it step by step.

✅ 1. Include Bootstrap CSS and JS

Make sure you're including Bootstrap's CSS and JavaScript in your HTML. You can use the CDN:

 <!-- CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- JS (including Popper and Bootstrap JS) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" defer></script>

The bundle version includes Popper, which is required for toolstips and some components.

? 2. Create a Basic Collapse (Single Toggle)

If you just want a simple show/hide element (not an according), use this:

 <!-- Button to toggle -->
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample">
  Toggle Content
</button>

<!-- Collapsible content -->
<div class="collapse" id="collapseExample">
  <div class="card card-body mt-2">
    This content appears and disappears when you click the button.
  </div>
</div>

• data-bs-toggle="collapse" tells Bootstrap this button controls a collapse.
• data-bs-target="#collapseExample" points to the ID of the element to toggle.

? 3. Build a Full Accordion (Multiple Collapsible Items)

An accordingion lets you expand one item at a time (others automatically close). Use Bootstrap's accordion class:

 <div class="accordion" id="myAccordion">

  <!-- Item 1 -->
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne">
        Section 1
      </button>
    </h2>
    <div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#myAccordion">
      <div class="accordion-body">
        Content for section 1. This is visible by default because of the &#39;show&#39; class.
      </div>
    </div>
  </div>

  <!-- Item 2 -->
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo">
        Section 2
      </button>
    </h2>
    <div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#myAccordion">
      <div class="accordion-body">
        Content for section 2. Starts collapsed.
      </div>
    </div>
  </div>

  <!-- Item 3 -->
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree">
        Section 3
      </button>
    </h2>
    <div id="collapseThree" class="accordion-collapse collapse" data-bs-parent="#myAccordion">
      <div class="accordion-body">
        Content for section 3.
      </div>
    </div>
  </div>

</div>

? Key Points:

• Wrap all items in a container with class="accordion" and give it an ID (eg, myAccordion ).
• Each item must have class="accordion-item" .
• Use data-bs-parent="#myAccordion" so only one panel opens at a time.
• Add show class to make a panel open by default.
• Buttons get collapsed when closed — Bootstrap updates this automatically via JS.

?️ Optional: Customize Appearance

You can style the according with custom CSS. For example, remove borders or change background:

 .accordion-button {
  background-color: #f8f9fa;
  border-bottom: 1px solid #ddd;
}

.accordion-button:not(.collapsed) {
  background-color: #e9ecef;
  color: #000;
}

❗ Common Pitfalls

• Forgot data-bs-parent → all panels stay open.
• Missing Bootstrap JS → collapse won't work.
• Using wrong Bootstrap version (eg, v4 vs v5 syntax differences slightly).
• Duplicate IDs in data-bs-target and id .

Basically, just follow the structure and classes Bootstrap expects, and it works out of the box. No extra JavaScript needed.

The above is the detailed content of How to build an accordion or collapse component in Bootstrap?. For more information, please follow other related articles on the PHP Chinese website!