Collapse component in Bootsrap

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>

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.

Practice

1. What is the main purpose of the Bootstrap Collapse component?

easy

A. To hide or show content smoothly when a user clicks a control

B. To create a fixed navigation bar at the top of the page

C. To add animations to images on hover

D. To validate form inputs automatically

Solution

1. Step 1: Understand the Collapse component function

   The Collapse component is designed to toggle visibility of content smoothly, usually triggered by user actions like clicks.

2. Step 2: Compare options with the component's purpose

   Only To hide or show content smoothly when a user clicks a control describes hiding or showing content smoothly, which matches the Collapse component's role.

3. Final Answer:

   To hide or show content smoothly when a user clicks a control -> Option A

4. Quick Check:

   Collapse toggles content visibility = B [OK]

Hint: Collapse means hide/show content smoothly on click [OK]

Common Mistakes:

• Confusing Collapse with navigation or animation components
• Thinking Collapse validates forms
• Assuming Collapse is for styling images

2. Which attribute is required on a button to toggle a Bootstrap Collapse element?

easy

A. data-target="collapse"

B. data-toggle="collapse"

C. data-bs-toggle="collapse"

D. data-bs-target="collapse"

Solution

1. Step 1: Identify the correct Bootstrap 5 attribute for toggling Collapse

   Bootstrap 5 uses the prefix data-bs- for its JavaScript plugins, so the toggle attribute is data-bs-toggle="collapse".

2. Step 2: Eliminate outdated or incorrect attributes

   Options A and B use syntax without bs prefix (Bootstrap 4 or earlier). data-bs-target="collapse"'s data-bs-target="collapse" specifies the target element, not the toggle action.

3. Final Answer:

   data-bs-toggle="collapse" -> Option C

4. Quick Check:

   Toggle attribute in Bootstrap 5 = data-bs-toggle="collapse" [OK]

Hint: Use data-bs-toggle="collapse" for toggling in Bootstrap 5 [OK]

Common Mistakes:

• Using data-toggle instead of data-bs-toggle
• Confusing data-bs-target with toggle attribute
• Omitting the data-bs prefix

3. What will happen when the button below is clicked?

<button class="btn btn-primary" data-bs-toggle="collapse" data-bs-target="#info">Toggle Info</button>
<div id="info" class="collapse">Hidden content here</div>

medium

A. Nothing will happen because the button lacks a click event

B. The div with id "info" will smoothly appear or disappear

C. The button will change color but content stays hidden

D. The div will be removed from the page permanently

Solution

1. Step 1: Analyze the button attributes

   The button has data-bs-toggle="collapse" and data-bs-target="#info", linking it to the div with id "info".

2. Step 2: Understand the effect on the target div

   The div has class "collapse", so clicking the button toggles its visibility with a smooth animation.

3. Final Answer:

   The div with id "info" will smoothly appear or disappear -> Option B

4. Quick Check:

   Button toggles collapse div visibility = A [OK]

Hint: Button with data-bs-toggle toggles target collapse div [OK]

Common Mistakes:

• Thinking button needs JavaScript event handlers manually
• Assuming button changes style only
• Believing div is removed instead of toggled

4. Identify the error in this Bootstrap Collapse code snippet:

<button class="btn btn-secondary" data-bs-toggle="collapse" data-bs-target="#panel">Show</button>
<div id="panel" class="collaps">Content</div>

medium

A. The div has a typo in the class name; it should be "collapse"

B. The button is missing the data-bs-toggle attribute

C. The div id does not match the data-bs-target

D. The button should use data-toggle instead of data-bs-toggle

Solution

1. Step 1: Check the button attributes

   The button correctly uses data-bs-toggle="collapse" and targets #panel.

2. Step 2: Inspect the div class and id

   The div has id "panel" matching the target, but the class is "collaps" instead of "collapse". This typo prevents the collapse behavior.

3. Final Answer:

   The div has a typo in the class name; it should be "collapse" -> Option A

4. Quick Check:

   Class must be "collapse" for Bootstrap to work [OK]

Hint: Check class spelling: must be "collapse" not "collaps" [OK]

Common Mistakes:

• Misspelling the collapse class
• Confusing data-bs-toggle with data-toggle
• Mismatching id and data-bs-target

5. You want to create an accordion with two sections using Bootstrap Collapse. Which code snippet correctly ensures only one section is open at a time?

<div class="accordion" id="accordionExample">
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">Section 1</button>
    </h2>
    <div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
      <div class="accordion-body">Content 1</div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">Section 2</button>
    </h2>
    <div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
      <div class="accordion-body">Content 2</div>
    </div>
  </div>
</div>

hard

A. The divs lack the collapse class, so sections won't toggle

B. Missing data-bs-toggle attribute on buttons prevents collapse

C. Using aria-expanded="true" disables collapse functionality

D. This code correctly uses data-bs-parent to allow only one open section

Solution

1. Step 1: Check for accordion structure and attributes

   The code uses data-bs-parent="#accordionExample" on collapse divs, which ensures only one section is open at a time.

2. Step 2: Verify buttons and collapse classes

   Buttons have data-bs-toggle="collapse" and target correct divs. Collapse divs have the correct classes and IDs.

3. Final Answer:

   This code correctly uses data-bs-parent to allow only one open section -> Option D

4. Quick Check:

   data-bs-parent controls accordion behavior = C [OK]

Hint: Use data-bs-parent on collapse divs for accordion effect [OK]

Common Mistakes:

• Omitting data-bs-parent causes multiple sections open
• Forgetting collapse class on content divs
• Misusing aria-expanded attribute