Bootstrap 5Utilities

Bootstrap 5 Collapse

Bootstrap 5 Collapse is a JavaScript-powered utility that shows and hides content blocks with a smooth height transition, triggered by buttons or anchor tags using the data-bs-toggle='collapse' attribute. It requires no custom JavaScript — all behaviour is handled by Bootstrap's bundled JS. Use it when you need to progressively disclose content without navigating away from the page, such as FAQs, filter panels, or secondary settings.

Primary Class

.collapse

Common Use Cases

→FAQ sections where each question expands inline to reveal its answer, keeping the page compact without requiring a modal or new page
→Product filter sidebars on e-commerce pages where category, price range, and brand filters are collapsed by default to reduce visual noise on mobile
→Step-by-step onboarding checklists where each completed step collapses to confirm completion while the next step expands automatically
→Admin dashboards with collapsible configuration panels — for example, hiding advanced email settings unless the user explicitly needs them

Variants & Classes

Variant	Description	Classes
Collapse Default	Standard collapse with Bootstrap's default styling.	`collapse`
Collapse Responsive	Responsive variant that adapts to different screen sizes.	`collapse collapse-responsive`

Code Example

<p>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#shippingDetails" aria-expanded="false" aria-controls="shippingDetails">
    View Shipping Details
  </button>
</p>
<div class="collapse" id="shippingDetails">
  <div class="card card-body">
    <h6 class="fw-semibold">Standard Shipping</h6>
    <p class="mb-1">Delivery within 3–5 business days. Free on orders over £50.</p>
    <h6 class="fw-semibold mt-2">Express Shipping</h6>
    <p class="mb-0">Next-day delivery for orders placed before 2pm. £6.99 flat rate.</p>
  </div>
</div>

Live Examples

Basic Collapse

Example 1

Canvas Framework Variants

The Canvas template extends Bootstrap 5 with 1,658+ component variants. Generate any of these using Canvas Builder:

✓Canvas Builder generated collapse with custom colours
✓Collapse with interactive states
✓Responsive collapse for all screen sizes

Best Practices

Target multiple elements with one trigger

Set data-bs-target to a CSS selector that matches multiple elements — for example, data-bs-target='.filter-section' — and Bootstrap will toggle all matching collapsed elements simultaneously, useful for expand-all / collapse-all controls.

Use show class to default open

Add the show class directly to the collapse div (e.g., <div class='collapse show' id='panel1'>) to render a section expanded on page load without any JavaScript initialization.

Pair with aria-expanded for accessibility

Always include aria-expanded='false' on the trigger button — Bootstrap automatically toggles it to 'true' when content is open, which screen readers use to announce the current state to keyboard users.

Avoid collapsing large data tables on mobile

Collapse is suited for moderate content blocks; hiding a 200-row table inside a collapse can cause layout reflow jank on low-powered devices — consider pagination or a dedicated drawer component instead.

FAQ

Can I animate the collapse with a custom duration or easing?

Yes. Bootstrap's collapse transition is controlled by the CSS variable --bs-transition-collapse, which defaults to height 0.35s ease. Override it in your stylesheet with :root { --bs-transition-collapse: height 0.6s cubic-bezier(0.4, 0, 0.2, 1); } to change speed and easing globally, or scope it to a specific element by targeting its selector directly.

How do I build an accordion-style group where only one panel is open at a time?

Add a data-bs-parent attribute pointing to a common parent element's ID on each collapse div — for example, data-bs-parent='#faqAccordion'. Bootstrap will close any open sibling collapse within that parent when a new one is opened. For more control, use the dedicated Accordion component which wraps this behaviour with additional styling.

How does Canvas Builder handle Collapse components?

Canvas Builder reads your prompt context to determine which sections benefit from progressive disclosure, then outputs the full collapse markup including trigger buttons, ARIA attributes, and the collapse target div. It applies your brand's primary colour to the toggle button, generates meaningful real content inside the collapsed panel rather than lorem ipsum, and ensures the output is responsive so the collapse works correctly across all breakpoints.