Why Multi-target collapse in Bootsrap? - Purpose & Use Cases

The Big Idea

What if one button could magically open or close many parts of your page at once?

The Scenario

Imagine you have a webpage with several sections that you want to show or hide when a user clicks a button. You try to write separate buttons and scripts for each section manually.

The Problem

Writing separate code for each toggle button and target section is slow and repetitive. If you want to change the behavior or add more sections, you must update many places, which can cause mistakes and inconsistent behavior.

The Solution

Multi-target collapse lets you control multiple sections with a single button easily. You just specify all the sections to toggle at once, so your code stays simple and consistent.

Before vs After

✗ Before

<button data-bs-toggle="collapse" data-bs-target="#section1">Toggle 1</button>
<div id="section1" class="collapse">Content 1</div>
<button data-bs-toggle="collapse" data-bs-target="#section2">Toggle 2</button>
<div id="section2" class="collapse">Content 2</div>

✓ After

<button data-bs-toggle="collapse" data-bs-target="#section1, #section2">Toggle Both</button>
<div id="section1" class="collapse">Content 1</div>
<div id="section2" class="collapse">Content 2</div>

What It Enables

You can easily show or hide multiple parts of your page with one click, making your interface cleaner and your code simpler.

Real Life Example

On a FAQ page, a single button can expand or collapse several related answers at once, helping users find information faster.

Key Takeaways

Manual toggling of multiple sections is repetitive and error-prone.

Multi-target collapse lets one button control many sections together.

This keeps your code simple and your page easier to use.