Bootstrap

Bootstrap Js Collapse

Building Expandable Sections with Bootstrap JS Collapse

Need to show or hide sections of content with a smooth animation — like FAQs, dropdowns, or menus? Bootstrap’s Collapse component gives you everything you need using just HTML and a touch of JavaScript.

In this post, we’ll walk through how to use the Bootstrap Collapse component and how to control it with both data attributes and JavaScript methods.

Step 1: Include Bootstrap

Use the official Bootstrap CDN or your own build — just make sure JavaScript is included.

html
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- Bootstrap Bundle JS (includes Collapse plugin) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

Basic Collapse Example (With data-bs-toggle)

html
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample">
Toggle Content
</button>

<div class="collapse mt-2" id="collapseExample">
<div class="card card-body">
This content is hidden by default. Click the button to show/hide.
</div>
</div>

✅ This works without writing any JavaScript. Bootstrap automatically handles the collapsing behavior.

How It Works

  • data-bs-toggle="collapse" turns a button or link into a trigger.

  • data-bs-target="#id" connects the trigger to the collapsible content.

  • The collapsible content must have the collapse class.

Collapse Inside an Accordion

Use this pattern to create multiple collapsible panels — but only one stays open at a time.

html
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button" data-bs-toggle="collapse" data-bs-target="#panelOne">
Accordion Item #1
</button>
</h2>
<div id="panelOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
<div class="accordion-body">
First panel content.
</div>
</div>
</div>

<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#panelTwo">
Accordion Item #2
</button>
</h2>
<div id="panelTwo" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
<div class="accordion-body">
Second panel content.
</div>
</div>
</div>
</div>

data-bs-parent makes it behave like a traditional accordion: only one section is open at a time.

JavaScript API: Programmatic Control

You can also control collapse behavior using Bootstrap’s JS API.

HTML:

html
<div class="collapse" id="myCollapse">Hidden content here</div>

JavaScript:

javascript
const collapseEl = document.getElementById('myCollapse');
const bsCollapse = new bootstrap.Collapse(collapseEl);

// Show programmatically
bsCollapse.show();

// Hide programmatically
bsCollapse.hide();

// Toggle programmatically
bsCollapse.toggle();

⚙️ Collapse Options & Events

Option Description
show() Expands the element
hide() Collapses the element
toggle() Toggles the visibility

Bootstrap also provides events like:

javascript
collapseEl.addEventListener('show.bs.collapse', () => {
console.log('About to show collapse');
});

collapseEl.addEventListener('hidden.bs.collapse', () => {
console.log('Collapse is now hidden');
});

✅ Use Cases

  • FAQs (accordion style)

  • Mobile menus

  • Read-more sections

  • Filters/sidebars in eCommerce UIs

Final Thoughts

Bootstrap’s Collapse component gives you flexible content toggling with smooth animations, zero dependencies, and clean markup. Whether you’re building a sidebar, FAQ, or dynamic content section, the Collapse utility lets you manage visibility with ease.

Helpful Links

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *