Bootstrap 5 Collapse

Welcome to The Coding College! In today’s tutorial, we’ll explore the Bootstrap 5 Collapse component, a powerful tool for creating collapsible sections in your website. Whether you want to hide/show content dynamically or build a streamlined accordion, this guide will cover everything you need to know.

What is Bootstrap 5 Collapse?

The Collapse component in Bootstrap 5 is used to toggle the visibility of content. With just a few classes and attributes, you can easily create collapsible sections that enhance user experience by saving space and organizing information.

Getting Started with Collapse

To implement a collapsible element, you need:

  1. A trigger (like a button or link) that toggles the visibility of the collapsible content.
  2. The collapsible content, styled with the .collapse class.

Example: Basic Collapse

Here’s the simplest example of a collapsible section:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap 5 Collapse</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container mt-5">
    <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#exampleCollapse" aria-expanded="false" aria-controls="exampleCollapse">
      Toggle Content
    </button>
    <div class="collapse mt-3" id="exampleCollapse">
      <div class="card card-body">
        This is some collapsible content. Click the button again to hide it.
      </div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Output:

A button that toggles the visibility of a card containing collapsible content.

Collapse with Multiple Targets

You can control multiple collapsible elements with a single trigger.

Example: Controlling Multiple Collapses

<div class="container mt-5">
  <button class="btn btn-success" type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-expanded="false" aria-controls="collapseOne collapseTwo">
    Toggle Both
    </button>
  <div class="row mt-3">
    <div class="col">
      <div class="collapse multi-collapse" id="collapseOne">
        <div class="card card-body">
          This is the first collapsible section.
        </div>
      </div>
    </div>
    <div class="col">
      <div class="collapse multi-collapse" id="collapseTwo">
        <div class="card card-body">
          This is the second collapsible section.
        </div>
      </div>
    </div>
  </div>
</div>

Accordion Using Collapse

An accordion is a group of collapsible sections where only one section is visible at a time. Bootstrap 5 makes it easy to create an accordion using the data-bs-parent attribute.

Example: Accordion

<div class="accordion" id="accordionExample">
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingOne">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
        Accordion Item #1
      </button>
    </h2>
    <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        This is the first item's accordion body.
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingTwo">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
        Accordion Item #2
      </button>
    </h2>
    <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        This is the second item's accordion body.
      </div>
    </div>
  </div>
</div>

Styling and Customization

Adding Animation:

Bootstrap automatically adds smooth animations to the collapse. You can modify the duration using custom CSS.

Changing Colors:

Style the collapsible content by adding utility classes like bg-primary, text-white, or custom styles.

<div class="collapse" id="customCollapse" style="background-color: #f8f9fa; border: 1px solid #dee2e6;">
  <div class="p-3">
    Custom-styled collapsible content!
  </div>
</div>

Using JavaScript with Collapse

For advanced use cases, you can control collapsibles programmatically using Bootstrap’s JavaScript API.

Example: JavaScript Trigger

<script>
  const collapseElement = document.getElementById('exampleCollapse');
  const collapseInstance = new bootstrap.Collapse(collapseElement, {
    toggle: false
  });

  document.getElementById('showCollapse').addEventListener('click', () => {
    collapseInstance.show();
  });

  document.getElementById('hideCollapse').addEventListener('click', () => {
    collapseInstance.hide();
  });
</script>

Accessibility Tips

  1. Use descriptive labels for triggers using the aria-expanded and aria-controls attributes.
  2. Ensure all collapsible content is keyboard-accessible.
  3. Use meaningful headings and content organization for better user experience.

Common Use Cases for Collapse

  1. FAQs Sections: Collapsible panels are perfect for presenting frequently asked questions.
  2. Content Organization: Toggle large content sections to save space.
  3. Advanced Navigation: Create sidebars or menus with collapsible submenus.

FAQs About Bootstrap 5 Collapse

Q1: Can I nest collapsibles?

Yes, you can nest collapsibles, but you need to carefully manage aria-controls and data-bs-parent attributes for proper behavior.

Q2: How do I style the toggle button?

You can style the button using Bootstrap’s utility classes or custom CSS.

Q3: Does the collapse work without JavaScript?

No, the Bootstrap 5 Collapse component relies on JavaScript for its functionality.

Conclusion

The Bootstrap 5 Collapse component is an essential tool for creating dynamic, space-saving designs. Its simplicity and flexibility make it ideal for a variety of use cases, from FAQs to advanced navigation.

Leave a Comment