Collapsible Content with Bootstrap 5.3: Create Interactive Collapse Components for Your Website

In Bootstrap 5.3, the "Collapse" component allows you to create collapsible content sections on your website. It enables you to hide and show sections of content, providing an interactive way to manage and organize information.

The Collapse component in Bootstrap 5.3 works based on a trigger element that toggles the visibility of the target content. When the trigger element is clicked or activated, the associated content collapses or expands, dynamically adjusting the layout of your webpage.

To use the Collapse component in Bootstrap 5.3, follow these steps:

Set up the trigger element:

Start by creating a trigger element, such as a button, link, or any other HTML element, that will initiate the collapse behavior. Assign a unique ID to the trigger element.

Create the collapsible content:

Next, create the content that you want to collapse or expand. Wrap this content in a <div> element and give it a unique ID. Make sure to include the class "collapse" to indicate that this content is collapsible.

Associate the trigger with the content:

Add the "data-bs-toggle" attribute to the trigger element and set its value to "collapse". Then, set the "data-bs-target" attribute to the ID of the collapsible content. This establishes the link between the trigger and the content that should be collapsed or expanded.

Customize the appearance and behavior:

Optionally, you can add additional classes, such as "show" or "collapse", to the collapsible content or the trigger element to control its initial state. You can also use CSS or JavaScript to further customize the appearance and behavior of the collapse component.

Here's an example of how to use the Collapse component in Bootstrap 5.3:

<a href="#box" class="btn btn-secondary" data-bs-toggle="collapse">Collapse</a>
<button class="btn btn-dark" data-bs-toggle="collapse" data-bs-target="#box">Collapse</button>

<div id="box" class="p-3 bg-secondary-subtle mt-3">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum rerum dignissimos necessitatibus alias, eligendi quis nesciunt quasi. Debitis blanditiis labore possimus? Tenetur ipsam repellat soluta officiis alias recusandae consequuntur quod, placeat ratione ipsa incidunt fugiat
reprehenderit autem quisquam blanditiis expedita ea ex odio quos rem numquam atque ab velit
</div>

There are two trigger elements: an anchor (<a>) tag and a button (<button>).
Both trigger elements have the attribute data-bs-toggle="collapse", which indicates that they will trigger the collapse behavior.
The anchor tag has an href attribute with the value #box, which refers to the collapsible content with the ID "box".
The button has a data-bs-target attribute with the value #box, which also refers to the collapsible content with the ID "box".
The collapsible content is a <div> element with the ID "box". It has the class "p-3" (padding), "bg-secondary-subtle" (background color), and "mt-3" (margin-top) for styling purposes.

Horizontal Collapse

The collapse plugin also supports horizontal collapsing. Add the .collapse-horizontal modifier class to transition the width instead of height and set a width on the immediate child element.

<button class="btn btn-dark" data-bs-toggle="collapse" data-bs-target="#box2">Collapse</button>
<div style="min-height: 120px" class="mt-3">
<div class="collapse collapse-horizontal" id="box2">
  <div class="card card-body" style="width: 300px">
    <p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus modi laudantium, cupiditate repellat natus eum aliquam sunt fugiat et officia accusamus neque beatae asperiores animi quam molestias earum adipisci aspernatur.</p>
  </div>
</div>
</div>

Multiple toggles and targets

In Bootstrap 5.3, you can create Autoplaying Carousels that automatically transition between slides without user interaction. This feature allows you to create dynamic and engaging image sliders or slideshows that continuously cycle through the content.

There are two collapsible content sections, each represented by a <div> element with the class "collapse" and a unique ID. The content sections have the "card card-body" classes for styling purposes.

You can customize the trigger elements, collapsible content sections, styles, and behaviors further to suit your specific needs. Add more trigger elements and content sections as necessary, ensuring each trigger is associated with the correct target by using unique IDs.

With multiple toggles and targets in a collapse component, you can create interactive content sections that can be individually shown or hidden based on user interaction, providing a versatile and flexible way to manage your content.

<a href="#box3" class="btn btn-dark" data-bs-toggle="collapse">Box-3</a>
<button class="btn btn-dark" data-bs-toggle="collapse" data-bs-target="#box4">Box-4</button>
<button class="btn btn-dark" data-bs-toggle="collapse" data-bs-target=".boxs">Box-3 & Box-4</button>
<div class="row mt-3">
    <div class="col p-3">
      <div class="collapse boxs" id="box3">
        <div class="card card-body">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quod fugit saepe laborum quis maxime dolorem!</div>
      </div>
    </div>
    <div class="col p-3">
      <div class="collapse boxs" id="box4">
        <div class="card card-body">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quod fugit saepe laborum quis maxime dolorem!</div>
      </div>
    </div>
</div>

Example

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Collapse</title>
    <link rel="stylesheet" href="../css/base.css" />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css" />
  </head>

  <body>
    <div class="container my-5">
      <a href="#box" class="btn btn-secondary" data-bs-toggle="collapse">Collapse</a>
      <button class="btn btn-dark" data-bs-toggle="collapse" data-bs-target="#box">Collapse</button>

      <div id="box" class="p-3 bg-secondary-subtle mt-3">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum rerum dignissimos necessitatibus alias, eligendi quis nesciunt quasi. Debitis blanditiis labore possimus? Tenetur ipsam repellat soluta officiis alias recusandae consequuntur quod, placeat ratione ipsa incidunt fugiat
        reprehenderit autem quisquam blanditiis expedita ea ex odio quos rem numquam atque ab velit
      </div>
      <hr />

      <p>Horizontal Collapse</p>
      <button class="btn btn-dark" data-bs-toggle="collapse" data-bs-target="#box2">Collapse</button>
      <div style="min-height: 120px" class="mt-3">
        <div class="collapse collapse-horizontal" id="box2">
          <div class="card card-body" style="width: 300px">
            <p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus modi laudantium, cupiditate repellat natus eum aliquam sunt fugiat et officia accusamus neque beatae asperiores animi quam molestias earum adipisci aspernatur.</p>
          </div>
        </div>
      </div>
      <hr />
      <p>Multiple toggles and targets</p>
      <a href="#box3" class="btn btn-dark" data-bs-toggle="collapse">Box-3</a>
      <button class="btn btn-dark" data-bs-toggle="collapse" data-bs-target="#box4">Box-4</button>
      <button class="btn btn-dark" data-bs-toggle="collapse" data-bs-target=".boxs">Box-3 & Box-4</button>
      <div class="row mt-3">
        <div class="col p-3">
          <div class="collapse boxs" id="box3">
            <div class="card card-body">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quod fugit saepe laborum quis maxime dolorem!</div>
          </div>
        </div>
        <div class="col p-3">
          <div class="collapse boxs" id="box4">
            <div class="card card-body">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quod fugit saepe laborum quis maxime dolorem!</div>
          </div>
        </div>
      </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  </body>
</html>

Live Preview

Customize the trigger element, collapsible content, styles, and behaviors to fit your specific requirements. You can use multiple collapse components on a single web page and combine them with other Bootstrap components to create interactive and dynamic content sections.