Bootstrap 4 Collapse

Welcome to The Coding College! In this guide, we’ll explore the Bootstrap 4 Collapse component, a powerful feature that allows you to create collapsible content sections such as toggleable menus, accordions, or hidden sections.

The collapse component is essential for building dynamic, user-friendly, and space-efficient web designs. Let’s dive in!

What Is the Bootstrap 4 Collapse Component?

The Collapse component in Bootstrap 4 allows you to show or hide content with a smooth sliding animation. You can control the visibility of the content using buttons, links, or any trigger element.

Basic Collapse

To create a basic collapsible section, use the data-toggle="collapse" attribute on the triggering element and link it to the collapsible content using the id attribute.

Example:

<!DOCTYPE html>  
<html lang="en">  
<head>  
  <meta charset="UTF-8">  
  <meta name="viewport" content="width=device-width, initial-scale=1.0">  
  <title>Bootstrap 4 Basic Collapse</title>  
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">  
</head>  
<body>  
  <div class="container my-5">  
    <h2>Basic Collapse Example</h2>  
    <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample">Toggle Content</button>  
    <div id="collapseExample" class="collapse mt-3">  
      <div class="card card-body">  
        This is some collapsible content. Click the button to show or hide it.  
      </div>  
    </div>  
  </div>  

  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>  
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>  
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>  
</body>  
</html>

Explanation:

  • data-toggle="collapse": Activates the collapse functionality.
  • data-target="#collapseExample": Links the button to the collapsible content.
  • .collapse: Applies collapse styling to the hidden content.
  • .card-body: Provides a styled container for the collapsible content.

Accordion Example

An accordion is a series of collapsible panels where only one panel is expanded at a time. This is a common UI pattern for FAQs or multi-section layouts.

Example:

<div class="container my-5">  
  <h2>Accordion Example</h2>  
  <div id="accordion">  
    <div class="card">  
      <div class="card-header">  
        <h5 class="mb-0">  
          <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">  
            Collapsible Group Item #1  
          </button>  
        </h5>  
      </div>  

      <div id="collapseOne" class="collapse show" data-parent="#accordion">  
        <div class="card-body">  
          Content for the first accordion item.  
        </div>  
      </div>  
    </div>  

    <div class="card">  
      <div class="card-header">  
        <h5 class="mb-0">  
          <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">  
            Collapsible Group Item #2  
          </button>  
        </h5>  
      </div>  

      <div id="collapseTwo" class="collapse" data-parent="#accordion">  
        <div class="card-body">  
          Content for the second accordion item.  
        </div>  
      </div>  
    </div>  
  </div>  
</div>

Key Features:

  • data-parent="#accordion": Ensures only one section is open at a time.
  • .collapse.show: Makes the first item expanded by default.

Multi-Target Collapse

You can trigger multiple collapse elements simultaneously using the same data-target.

Example:

<div class="container my-5">  
  <h2>Multi-Target Collapse</h2>  
  <button class="btn btn-success mb-2" data-toggle="collapse" data-target=".multi-collapse">Toggle All</button>  
  <div class="row">  
    <div class="col">  
      <div class="collapse multi-collapse">  
        <div class="card card-body">  
          Collapsible content #1.  
        </div>  
      </div>  
    </div>  
    <div class="col">  
      <div class="collapse multi-collapse">  
        <div class="card card-body">  
          Collapsible content #2.  
        </div>  
      </div>  
    </div>  
  </div>  
</div>

Explanation:

  • .multi-collapse: A shared class for multiple collapsible items.
  • data-target=".multi-collapse": Targets all elements with the .multi-collapse class.

Collapsible Navigation

Collapsible menus are widely used in responsive navigation bars.

Example:

<nav class="navbar navbar-expand-lg navbar-light bg-light">  
  <a class="navbar-brand" href="#">Navbar</a>  
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">  
    <span class="navbar-toggler-icon"></span>  
  </button>  
  <div class="collapse navbar-collapse" id="navbarNav">  
    <ul class="navbar-nav">  
      <li class="nav-item">  
        <a class="nav-link" href="#">Home</a>  
      </li>  
      <li class="nav-item">  
        <a class="nav-link" href="#">Features</a>  
      </li>  
      <li class="nav-item">  
        <a class="nav-link" href="#">Contact</a>  
      </li>  
    </ul>  
  </div>  
</nav>

Explanation:

  • navbar-toggler: Creates the toggle button for small screens.
  • .navbar-collapse: Contains the collapsible content.

Collapse Animation

Bootstrap 4 provides smooth transitions for collapsible elements using CSS.

Key Points:

  • The animation speed is predefined in Bootstrap’s CSS, but you can customize it by overriding the transition property.

Practical Example: Combining Features

Here’s a complete example showcasing different collapse components in action:

<!DOCTYPE html>  
<html lang="en">  
<head>  
  <meta charset="UTF-8">  
  <meta name="viewport" content="width=device-width, initial-scale=1.0">  
  <title>Bootstrap 4 Collapse</title>  
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">  
</head>  
<body>  
  <div class="container my-5">  
    <h1 class="text-center text-info">Bootstrap 4 Collapse Examples</h1>  

    <!-- Basic Collapse -->  
    <h3>Basic Collapse</h3>  
    <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#example1">Toggle Content</button>  
    <div id="example1" class="collapse mt-3">  
      <p>This is some collapsible content.</p>  
    </div>  

    <!-- Accordion -->  
    <h3 class="mt-5">Accordion</h3>  
    <div id="accordionExample">  
      <div class="card">  
        <div class="card-header">  
          <button class="btn btn-link" data-toggle="collapse" data-target="#item1">Accordion Item 1</button>  
        </div>  
        <div id="item1" class="collapse show" data-parent="#accordionExample">  
          <div class="card-body">  
            Content for accordion item 1.  
          </div>  
        </div>  
      </div>  
    </div>  

  </div>  

  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>  
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>  
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>  
</body>  
</html>

Conclusion

The Bootstrap 4 Collapse component is versatile and easy to implement, making it an excellent tool for hiding and showing content dynamically. From basic toggleable sections to advanced accordions, you can customize it to suit your project needs.

Leave a Comment