0
0
Bootsrapmarkup~5 mins

Collapse component in Bootsrap

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

The Collapse component lets you hide or show content smoothly on a webpage. It helps keep pages clean and organized by showing only what the user wants to see.

To hide extra details until the user clicks a button or link.
To create an accordion menu where only one section is open at a time.
To save space on mobile screens by collapsing long content.
To show or hide forms or instructions on demand.
To improve user experience by controlling what content is visible.
Syntax
Bootsrap
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Toggle content
</button>
<div class="collapse" id="collapseExample">
  <div class="card card-body">
    Collapsible content here.
  </div>
</div>

The data-bs-toggle="collapse" attribute tells Bootstrap this button controls a collapse.

The data-bs-target attribute points to the ID of the content to show or hide.

Examples
A simple button that toggles a block of text.
Bootsrap
<button class="btn btn-secondary" type="button" data-bs-toggle="collapse" data-bs-target="#info" aria-expanded="false" aria-controls="info">
  Show Info
</button>
<div class="collapse" id="info">
  <div class="card card-body">
    Here is some extra information.
  </div>
</div>
Using a link instead of a button to toggle collapse.
Bootsrap
<a class="btn btn-link" data-bs-toggle="collapse" href="#details" role="button" aria-expanded="false" aria-controls="details">
  More details
</a>
<div class="collapse" id="details">
  <div class="card card-body">
    Detailed content shown or hidden.
  </div>
</div>
An accordion example where one section expands and collapses.
Bootsrap
<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">
        Content for first accordion item.
      </div>
    </div>
  </div>
</div>
Sample Program

This page shows a button that toggles a hidden content area. When you click the button, the content smoothly appears or disappears.

Bootsrap
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Bootstrap Collapse Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
  <main class="container py-4">
    <h1>Collapse Component Demo</h1>
    <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseContent" aria-expanded="false" aria-controls="collapseContent">
      Toggle Details
    </button>
    <div class="collapse mt-3" id="collapseContent">
      <div class="card card-body">
        This content is hidden by default and shown when you click the button.
      </div>
    </div>
  </main>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
OutputSuccess
Important Notes

Always include aria-expanded and aria-controls for accessibility so screen readers understand the toggle state.

Use Bootstrap's JavaScript bundle to enable the collapse functionality.

Collapse works well with buttons or links but avoid using elements that are not interactive by default.

Summary

The Collapse component hides or shows content smoothly on user action.

Use data-bs-toggle="collapse" and data-bs-target to connect controls and content.

It improves page organization and user experience by controlling visible content.