Multi-target collapse in Bootsrap - Browser Rendering Trace

Render Flow - Multi-target collapse

[Read HTML with data-bs-toggle="collapse"] -> [Create button element] -> [Read data-bs-target attribute] -> [Identify multiple targets] -> [Attach event listener] -> [On click: toggle collapse class on all targets] -> [Recalculate layout] -> [Animate height changes] -> [Paint updated elements]

Bootstrap reads the button with data attributes, finds multiple collapse targets, and toggles their visibility with smooth height animations.

Render Steps - 5 Steps

Code Added:<button class="btn btn-primary" data-bs-toggle="collapse" data-bs-target="#collapseOne, #collapseTwo" aria-expanded="false" aria-controls="collapseOne collapseTwo">Toggle Both</button>

Before

[ ]
(empty page)

→

After

[Button: Toggle Both]
(empty content below)

The button appears on the page, ready to toggle collapsible content.

🔧 Browser Action:Creates button element in DOM and paints it.

Code Sample

A button toggles the visibility of two separate collapsible content areas simultaneously.

Bootsrap

<button class="btn btn-primary" data-bs-toggle="collapse" data-bs-target="#collapseOne, #collapseTwo" aria-expanded="false" aria-controls="collapseOne collapseTwo">
  Toggle Both
</button>

<div id="collapseOne" class="collapse">
  <div class="card card-body">
    Content One
  </div>
</div>

<div id="collapseTwo" class="collapse">
  <div class="card card-body">
    Content Two
  </div>
</div>

Render Quiz - 3 Questions

After step 4, what do you see on the page?

A Both collapsible content areas remain hidden.

B Only the first collapsible content area is visible.

C Both collapsible content areas are visible and expanded.

D The button disappears from the page.

Common Confusions - 3 Topics

Why do both collapsible areas toggle together instead of separately?

Because the button's data-bs-target lists both IDs separated by a comma, Bootstrap toggles all targets at once (see render_step 4).

💡 One button + multiple targets = all targets toggle together.

Why doesn't the content show immediately on page load?

The collapse class hides content by default with zero height (render_step 2 and 3). Content only shows when toggled.

💡 Collapse class means hidden until toggled.

What happens if I forget to separate IDs with a comma in data-bs-target?

Bootstrap won't recognize multiple targets properly, so only one or no collapse toggling happens (related to render_step 1).

💡 Separate multiple targets with commas in data-bs-target.

Property Reference

Attribute	Value	Effect	Visual Behavior	Common Use
data-bs-toggle	collapse	Enables collapse behavior	Makes element toggle visibility of targets	Buttons or links to toggle content
data-bs-target	#id1, #id2	Specifies multiple targets	Toggles multiple collapse elements at once	Multi-target collapse toggling
aria-expanded	true/false	Accessibility state	Indicates if targets are expanded or collapsed	Screen readers and keyboard users
aria-controls	id1 id2	Accessibility control	Links button to controlled collapsible elements	Improves accessibility

Concept Snapshot

Multi-target collapse uses a single button with data-bs-target listing multiple IDs separated by commas. The collapse class hides content by default with zero height. Clicking the button toggles all targets simultaneously with smooth height animation. ARIA attributes keep it accessible. Use commas to separate multiple targets in data-bs-target.