❮ Previous Next ❯

Collapse Components

  • Use Bootstrap collapse and accordion for expandable content sections.

  • Introduction to Collapse Components

    Collapse components in Bootstrap are used to show and hide content dynamically without navigating to another page.

    They are useful when:

    • Screen space is limited

    • Content should be revealed only on demand

    • Information needs to be organized progressively

    Bootstrap provides two main ways to work with collapsible content:

    1. Accordion (structured, grouped collapse)

    2. Collapse Utility (generic show/hide)

    Both rely on Bootstrap JavaScript.

    Accordion

    What Is an Accordion ?

    An Accordion is a vertically stacked list of items where:

    • Each item has a header

    • Clicking the header expands its content

    • Usually only one item is open at a time

    Accordions are commonly used for:

    • FAQs

    • Help sections

    • Feature explanations

    • Settings panels

    Why Use an Accordion ?

    Accordions are useful because they:

    • Save vertical space

    • Organize large content logically

    • Reduce information overload

    • Improve readability

    They are ideal when content is related but lengthy.

    Basic Accordion Structure

    An accordion consists of:

    1. Accordion wrapper

    2. Accordion item

    3. Header (button)

    4. Collapsible body

Creating a Collapsible Accordion in Bootstrap

The .accordion component creates collapsible sections where only one item stays open at a time. 

<div class="accordion" id="myAccordion">
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button" 
              data-bs-toggle="collapse" 
              data-bs-target="#itemOne">
        Accordion Item 1
      </button>
    </h2>
    <div id="itemOne" class="accordion-collapse collapse show"
         data-bs-parent="#myAccordion">
      <div class="accordion-body">
        This is the content of item 1.
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button collapsed"
              data-bs-toggle="collapse"
              data-bs-target="#itemTwo">
        Accordion Item 2
      </button>
    </h2>
    <div id="itemTwo" class="accordion-collapse collapse"
         data-bs-parent="#myAccordion">
      <div class="accordion-body">
        This is the content of item 2.
      </div>
    </div>
  </div>
</div>

  • Understanding the Accordion Code

    PartPurpose
    .accordionMain wrapper
    .accordion-itemIndividual section
    .accordion-headerHeader container
    .accordion-buttonClickable toggle
    data-bs-toggle="collapse"Enables collapse
    data-bs-targetLinks header to content
    .accordion-collapseCollapsible content
    data-bs-parentAllows only one open

    Accordion Behavior

    • Only one section stays open at a time

    • Clicking another header closes the previous one

    • show class makes an item open by default

      Accordion Best Practices

      • Use concise headers

      • Keep content readable

      • Do not overload accordion items

      • Use for related content only

    • Collapse Utility

      What Is the Collapse Utility ?

      The Collapse Utility is a generic component used to:

      • Show or hide any content

      • Toggle visibility on click

      • Work independently (not grouped like accordion)

      It is more flexible than accordion.

      When to Use Collapse Utility

      Use collapse utility when:

      • You want simple show/hide behavior

      • Content is not part of a group

      • You need independent toggles

      • Accordion behavior is not required

      Basic Collapse Structure

      Collapse utility consists of:

      1. Trigger element (button or link)

      2. Collapsible content container

    Creating Toggleable Content with Collapse

    The .collapse class allows content to be shown or hidden when triggered by a button. 

    <!-- Trigger Button -->
<button class="btn btn-primary" 
        data-bs-toggle="collapse" 
        data-bs-target="#collapseBox">
  Toggle Content
</button>

<!-- Collapsible Content -->
<div class="collapse mt-3" id="collapseBox">
  <div class="card card-body">
    This content can be shown or hidden.
  </div>
</div>
    • Understanding the Collapse Code
      ElementPurpose
      data-bs-toggle="collapse"Enables toggle
      data-bs-target="#collapseBox"Links trigger to content
      .collapseHidden by default
      .showMakes content visible
      idUnique identifier

    Triggering Collapse with Links and Multiple Targets

    Collapse can be triggered using anchor tags, and a single button can control multiple collapsible elements. 

    <!-- Collapse Using Anchor Tag -->
<a class="btn btn-link"
   data-bs-toggle="collapse"
   href="#collapseText">
  Show Details
</a>
<div class="collapse" id="collapseText">
  <p>Additional information here.</p>
</div>

<!-- Multiple Collapse Targets -->
<button class="btn btn-secondary"
        data-bs-toggle="collapse"
        data-bs-target=".multi-collapse">
  Toggle All
</button>
<div class="collapse multi-collapse">Box 1</div>
<div class="collapse multi-collapse">Box 2</div>

    • Collapse Utility Best Practices

      • Use clear trigger labels

      • Avoid hiding critical information

      • Do not nest collapses deeply

      • Ensure accessibility for keyboard users

      Accordion vs Collapse Utility

      FeatureAccordionCollapse Utility
      StructureGroupedIndependent
      Multiple openNo (default)Yes
      Use caseFAQs, sectionsToggle content
      ComplexityHigherLower
      Choose based on content relationship, not appearance.
    ❮ Previous Next ❯