BootstrapHow-ToBeginner · 3 min read

How to Create Collapse in Bootstrap: Simple Guide

To create a collapse in Bootstrap, use a button or a element with data-bs-toggle="collapse" and data-bs-target="#id" attributes. Then create a div with the matching id and class collapse to hold the collapsible content.

📐

Syntax

The collapse component requires a trigger element like a button or link with data-bs-toggle="collapse" to activate the toggle. The data-bs-target attribute points to the collapsible content's id. The content container uses the collapse class to hide or show content.

Trigger element: Has data-bs-toggle="collapse" and data-bs-target="#collapseExample".
Collapsible content: A div with id="collapseExample" and class collapse.

html

<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>

Output

A button labeled 'Toggle content' that when clicked shows or hides the content 'Collapsible content here.' inside a card.

💻

Example

This example shows a button that toggles the visibility of some text inside a card. Clicking the button expands or collapses the content smoothly.

html

<!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>
  <div class="container mt-4">
    <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#demoCollapse" aria-expanded="false" aria-controls="demoCollapse">
      Show/Hide Details
    </button>
    <div class="collapse mt-3" id="demoCollapse">
      <div class="card card-body">
        This is the collapsible content. It is hidden by default and shown when the button is clicked.
      </div>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Output

A webpage with a blue button labeled 'Show/Hide Details'. Clicking it reveals or hides a card with the text 'This is the collapsible content. It is hidden by default and shown when the button is clicked.'

⚠️

Common Pitfalls

Common mistakes when creating Bootstrap collapse include:

Forgetting to include Bootstrap's JavaScript bundle, so the collapse won't work.
Not matching the data-bs-target attribute with the id of the collapsible content.
Missing aria-expanded or aria-controls attributes, which help with accessibility.
Using data-toggle instead of data-bs-toggle in Bootstrap 5, which breaks the toggle.

Example of wrong and right usage:

bootstrap

<!-- Wrong: missing Bootstrap JS and wrong attribute -->
<button data-toggle="collapse" data-target="#wrongCollapse">Toggle</button>
<div id="wrongCollapse" class="collapse">Content</div>

<!-- Right: correct attributes and include Bootstrap JS -->
<button data-bs-toggle="collapse" data-bs-target="#rightCollapse" aria-expanded="false" aria-controls="rightCollapse">Toggle</button>
<div id="rightCollapse" class="collapse">Content</div>

📊

Quick Reference

Remember these key points when using Bootstrap collapse:

Use data-bs-toggle="collapse" on the trigger.
Set data-bs-target="#id" to link to the collapsible content.
The collapsible content must have class="collapse" and matching id.
Include Bootstrap CSS and JS files for proper styling and functionality.
Use aria-expanded and aria-controls for accessibility.

✅

Key Takeaways

Use data-bs-toggle="collapse" and data-bs-target="#id" on a button or link to create a collapse trigger.

The collapsible content must have class="collapse" and an id matching the trigger's data-bs-target.

Always include Bootstrap's JavaScript bundle for the collapse to work.

Use aria-expanded and aria-controls attributes to improve accessibility.

Avoid using old Bootstrap 4 attributes like data-toggle; use data-bs-toggle in Bootstrap 5.