• +91-9142290450

  • Hajipur, Bihar, 844101

☰
❮
❯

BS4 Collapse

← Previous Next →

The collapse component in Bootstrap 4 allows you to toggle the visibility of content. It is commonly used for hiding and showing sections, accordions, and navigation menus. Collapse helps organize content by reducing clutter, improving readability, and providing users control over what they want to see. Bootstrap 4 provides a simple, responsive, and flexible approach to implementing collapsible elements.

What Is Collapse?

A collapse is a container that can expand or contract when triggered by a button, link, or other element. Collapse components can contain text, images, lists, forms, or any HTML content. They can be controlled programmatically or with built-in data attributes, requiring minimal JavaScript.

Basic Collapse

The simplest collapse example uses a button to toggle a div with the .collapse class.

<p>
  <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    Toggle Content
  </a>
</p>
<div class="collapse" id="collapseExample">
  <div class="card card-body">
    This content is hidden by default and revealed when toggled.
  </div>
</div>

Clicking the button expands or collapses the content. The aria-expanded attribute updates automatically to indicate state for screen readers.

Collapse with Button

You can also use a <button> element to control a collapse:

<button class="btn btn-success" type="button" data-toggle="collapse" data-target="#collapseButton" aria-expanded="false" aria-controls="collapseButton">
  Show/Hide Content
</button>
<div class="collapse" id="collapseButton">
  <div class="card card-body">
    Collapsible content inside a card.
  </div>
</div>

Buttons provide an accessible and semantic way to toggle collapsible content.

Multiple Collapse Targets

A single button can control multiple collapse elements by using a class or multiple IDs in the data-target attribute.

<button class="btn btn-info" type="button" data-toggle="collapse" data-target=".multi-collapse" aria-expanded="false" aria-controls="collapseOne collapseTwo">
  Toggle Both Sections
</button>

<div class="collapse multi-collapse" id="collapseOne">
  <div class="card card-body">First collapsible section.</div>
</div>
<div class="collapse multi-collapse" id="collapseTwo">
  <div class="card card-body">Second collapsible section.</div>
</div>

This is useful for simultaneous control of related content sections.

Accordion (Single Collapse Group)

An accordion is a set of collapsible items where only one item is expanded at a time. It uses a parent container with data-parent or .accordion class to enforce exclusive visibility.

<div id="accordion">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h5 class="mb-0">
        <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Section 1
        </button>
      </h5>
    </div>
    <div id="collapseOne" class="collapse show" data-parent="#accordion">
      <div class="card-body">Content for section 1.</div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingTwo">
      <h5 class="mb-0">
        <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Section 2
        </button>
      </h5>
    </div>
    <div id="collapseTwo" class="collapse" data-parent="#accordion">
      <div class="card-body">Content for section 2.</div>
    </div>
  </div>
</div>

Accordions are ideal for FAQs, menus, or sections where only one panel should be open at a time.

Collapse with Links

Collapse can also be triggered using links instead of buttons, providing more flexible designs.

<a class="btn btn-warning" data-toggle="collapse" href="#collapseLink" role="button" aria-expanded="false" aria-controls="collapseLink">
  Toggle Link
</a>
<div class="collapse" id="collapseLink">
  <div class="card card-body">Content toggled by a link.</div>
</div>

This works well for inline content or navigation elements.

Collapse with Show and Hide Events

Bootstrap 4 provides JavaScript events to detect when a collapse is being shown or hidden:

  • show.bs.collapse – triggered before showing

  • shown.bs.collapse – triggered after showing

  • hide.bs.collapse – triggered before hiding

  • hidden.bs.collapse – triggered after hiding

$('#collapseExample').on('shown.bs.collapse', function () {
  console.log('Content is now visible.');
});

Events allow you to perform additional actions when a collapse changes state.

Best Practices

  1. Keep collapsed content concise and relevant.

  2. Use accordions for grouped content where only one panel should be open.

  3. Ensure proper labels with aria-controls and aria-expanded for accessibility.

  4. Avoid hiding critical information inside collapsible elements.

  5. Use cards inside collapsible sections for consistent styling.

Practical Examples

  • FAQ Section: Use an accordion to display questions and answers.

  • Sidebar Menus: Collapse submenus for clean navigation.

  • Content Sections: Show or hide detailed explanations or notes.

  • Forms: Toggle optional fields using collapse.

  • Dashboard Widgets: Expand or collapse panels to manage screen space.

Summary of the Tutorial

Bootstrap 4 collapse provides a simple, responsive, and accessible way to toggle content visibility. It can be used for standalone collapsible sections, multi-target controls, or accordions where only one panel should remain open. Proper use of collapse improves user experience by reducing clutter, organizing content, and providing interactive control.

Practice Questions

  1. Create a basic collapse section with a button that toggles a hidden paragraph.

  2. Create a collapse section using a link (<a>) to toggle the content.

  3. Create a collapse section inside a card with a header and body.

  4. Create two separate collapse sections that can be toggled independently using two buttons.

  5. Create a single button that toggles multiple collapse sections at the same time.

  6. Create an accordion with three sections where only one section can be open at a time.

  7. Create an accordion with the first section expanded by default using .show.

  8. Create a collapse section with a form inside that is hidden by default.

  9. Create a collapse section and log a message to the console when it is fully shown using the shown.bs.collapse event.

  10. Create a nested collapse section inside a card body for expandable content within a section.

← Previous Next →

Try a Short Quiz.

coding learning websites codepractice

No quizzes available.

Bootstrap 4

online coding class codepractice

Bootstrap Basics

Layout & Grid System

Content & Typography

Components

Forms

JavaScript Components

Utilities & Helpers

codepractice logo
Login
Go Back Top