Multi-target collapse in Bootsrap - Performance & Optimization

Performance: Multi-target collapse

MEDIUM IMPACT

This affects page interactivity and rendering speed when toggling multiple collapsible elements simultaneously.

Toggling multiple collapsible sections on a page at once

Bootsrap

<button id="toggleAll">Toggle All</button>
<div id="collapseOne" class="collapse">Content 1</div>
<div id="collapseTwo" class="collapse">Content 2</div>
<div id="collapseThree" class="collapse">Content 3</div>
<script>const btn = document.getElementById('toggleAll');
btn.addEventListener('click', () => {
  const collapses = document.querySelectorAll('.collapse');
  collapses.forEach(el => el.classList.toggle('show'));
});</script>

Manually toggling classes in a single script batch reduces layout thrashing by grouping DOM updates before the browser recalculates styles.

📈 Performance Gainsingle reflow and paint after all toggles, improving interaction speed

Toggling multiple collapsible sections on a page at once

Bootsrap

<button data-bs-toggle="collapse" data-bs-target="#collapseOne,#collapseTwo,#collapseThree">Toggle All</button>
<div id="collapseOne" class="collapse">Content 1</div>
<div id="collapseTwo" class="collapse">Content 2</div>
<div id="collapseThree" class="collapse">Content 3</div>

Using a single button to toggle multiple collapse targets triggers multiple layout recalculations and repaints for each element individually.

📉 Performance Costtriggers 3 reflows and 3 paints on toggle, causing slower interaction responsiveness

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Multi-target data-bs-toggle	Multiple toggle events	3 reflows (one per target)	3 paints	[X] Bad
Batch toggle with script	Single toggle event batch	1 reflow	1 paint	[OK] Good

Rendering Pipeline

When toggling multiple collapse targets, the browser recalculates styles and layouts for each element if done separately, causing multiple reflows and repaints. Grouping DOM changes reduces these costly steps.

→Style Calculation

→Layout

→Paint

⚠️ BottleneckLayout (reflow) stage is most expensive due to multiple toggles causing repeated recalculations.

Core Web Vital Affected

INP

This affects page interactivity and rendering speed when toggling multiple collapsible elements simultaneously.

Optimization Tips

1Avoid toggling multiple collapse targets separately to reduce reflows.

2Batch DOM updates when changing multiple elements to improve responsiveness.

3Use DevTools Performance panel to identify multiple layout events on toggle.

Performance Quiz - 3 Questions

What is the main performance issue when toggling multiple collapse targets using a single data-bs-toggle attribute with multiple selectors?

A It triggers multiple reflows and repaints, slowing interaction.

B It increases the bundle size significantly.

C It causes the page to reload.

D It disables keyboard navigation.

DevTools: Performance

How to check: Record a performance profile while clicking the toggle button. Look for multiple layout and paint events in the flame chart.

What to look for: Multiple layout (reflow) events indicate inefficient toggling; a single layout event shows optimized batch updates.