How to use Bootstrap collapse for an FAQ

Include Bootstrap via CDN with CSS and JavaScript for collapse functionality. 2. Structure FAQ using data-bs-toggle="collapse" and unique IDs for each answer. 3. Style buttons with custom CSS to enhance appearance and spacing. 4. Optionally use accordion component with data-bs-parent to allow only one open item at a time. Each data-bs-target must match the corresponding collapse element's ID, ensure the Bootstrap bundle is included, and test for responsiveness, as collapse works seamlessly across devices.

Using Bootstrap’s Collapse feature for an FAQ section is a clean and efficient way to organize content, making it easy for users to expand and collapse answers. Here’s how to set it up step by step using Bootstrap 5 (works with most modern versions).

1. Include Bootstrap in Your Project

First, make sure Bootstrap is properly linked in your HTML. You can use the CDN:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

This includes both CSS and JavaScript (needed for collapse functionality).

2. Structure the FAQ Markup

Use Bootstrap’s accordion or plain collapse components. For a simple, clean FAQ, you can use individual collapsible items without the full accordion JavaScript behavior (like auto-closing others).

Here’s a basic example using data-bs-toggle="collapse":

<div class="container my-4">
  <h2>Frequently Asked Questions</h2>

  <!-- Question 1 -->
  <div class="mb-3">
    <button class="btn btn-link text-start p-0" type="button" data-bs-toggle="collapse" data-bs-target="#answer1">
      What is Bootstrap?
    </button>
  </div>
  <div class="collapse" id="answer1">
    <p>Bootstrap is a free and open-source CSS framework directed at responsive, mobile-first front-end web development.</p>
  </div>

  <!-- Question 2 -->
  <div class="mb-3">
    <button class="btn btn-link text-start p-0" type="button" data-bs-toggle="collapse" data-bs-target="#answer2">
      How does collapse work?
    </button>
  </div>
  <div class="collapse" id="answer2">
    <p>The collapse JavaScript plugin allows you to toggle content visibility. It smoothly animates height from 0 to auto.</p>
  </div>

  <!-- Question 3 -->
  <div class="mb-3">
    <button class="btn btn-link text-start p-0" type="button" data-bs-toggle="collapse" data-bs-target="#answer3">
      Can I have multiple open answers?
    </button>
  </div>
  <div class="collapse" id="answer3">
    <p>Yes! Unlike the accordion, this setup allows multiple items to be open at once because we're not using accordion grouping.</p>
  </div>
</div>

3. Style the FAQ for Better UX

The default btn-link may look underlined or too subtle. Add custom CSS to improve appearance:

<style>
  .btn-link {
    text-decoration: none;
    font-weight: 500;
    color: #212529;
  }
  .btn-link:hover {
    color: #007bff;
    text-decoration: none;
  }
  .collapse   .collapse {
    margin-top: 1rem;
  }
</style>

This removes underlines, improves hover states, and adds spacing.

4. Optional: Use Accordion Behavior (One Open at a Time)

If you prefer only one FAQ item open at a time, use Bootstrap’s accordion component instead. Wrap items in a parent with data-bs-parent:

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

  <div class="accordion-item">
    <h3 class="accordion-header">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#q1">
        What is Bootstrap?
      </button>
    </h3>
    <div id="q1" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
      <div class="accordion-body">
        Bootstrap is a free and open-source CSS framework...
      </div>
    </div>
  </div>

  <!-- Repeat for other items -->

</div>

This automatically closes other items when one is opened.

Key Points to Remember

• Make sure each data-bs-target matches the id of the collapse element.
• Use collapsed class on buttons when the content starts hidden (Bootstrap uses this for styling).
• Include the full Bootstrap bundle (not just CSS) — collapse requires JavaScript.
• Test responsiveness — collapse works great on mobile.

Basically, Bootstrap’s collapse makes FAQ sections simple and interactive with minimal code. Whether you use standalone collapse or the accordion, it's flexible and looks professional out of the box.

The above is the detailed content of How to use Bootstrap collapse for an FAQ. For more information, please follow other related articles on the PHP Chinese website!