Horizontal collapse in Bootsrap - Performance & Optimization

Performance: Horizontal collapse

MEDIUM IMPACT

This affects page load speed and interaction responsiveness by controlling how content is shown or hidden horizontally, impacting layout recalculations and repaints.

Toggling horizontal collapse on a large content area

Bootsrap

<div class="collapse horizontal" id="collapseExample">
  <div class="card card-body">Large content here</div>
</div>
<script>
document.getElementById('toggleBtn').addEventListener('click', () => {
  const el = document.getElementById('collapseExample');
  if (el.style.width === '0px' || !el.style.width) {
    el.style.width = '300px';
  } else {
    el.style.width = '0px';
  }
});
</script>

Using inline width style changes with CSS transitions limits layout recalculations to width only, reducing reflows and improving animation smoothness.

📈 Performance GainTriggers 1 reflow per toggle, smoother animation, interaction blocks reduced to under 20ms

Toggling horizontal collapse on a large content area

Bootsrap

<div class="collapse horizontal show" id="collapseExample">
  <div class="card card-body">Large content here</div>
</div>
<script>
document.getElementById('toggleBtn').addEventListener('click', () => {
  const el = document.getElementById('collapseExample');
  el.classList.toggle('show');
});
</script>

Toggling the 'show' class triggers layout recalculations and repaints for the entire wide content, causing multiple reflows and slower interaction.

📉 Performance CostTriggers 2-3 reflows per toggle on large content, blocking interaction for 50-100ms depending on content size

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Toggle 'show' class on wide collapse	Minimal DOM ops	2-3 reflows per toggle	High paint cost due to width change	[X] Bad
Animate width with inline styles and transitions	Minimal DOM ops	1 reflow per toggle	Lower paint cost, smoother animation	[OK] Good

Rendering Pipeline

Horizontal collapse toggling affects the Layout and Paint stages by changing element width and visibility, causing the browser to recalculate positions and redraw affected areas.

→Layout

→Paint

→Composite

⚠️ BottleneckLayout recalculation is the most expensive due to width changes affecting sibling elements.

Core Web Vital Affected

INP

This affects page load speed and interaction responsiveness by controlling how content is shown or hidden horizontally, impacting layout recalculations and repaints.

Optimization Tips

1Avoid toggling width or display properties that cause layout recalculations.

2Use CSS transitions on transform or opacity for smoother horizontal collapse animations.

3Limit the size of content inside horizontal collapse to reduce reflow cost.

Performance Quiz - 3 Questions

What is the main performance cost when toggling a horizontal collapse using the 'show' class in Bootstrap?

A Multiple layout recalculations and repaints

B Increased network requests

C JavaScript parsing delay

D Image decoding time

DevTools: Performance

How to check: Record a performance profile while toggling the horizontal collapse. Look for Layout and Recalculate Style events in the flame chart.

What to look for: High number or long duration of Layout events indicates costly reflows; fewer and shorter Layout events mean better performance.

Practice

1. What does the collapse-horizontal class do in Bootstrap?

easy

A. It makes the collapsible content slide left or right instead of up or down.

B. It changes the color of the collapsible content.

C. It disables the collapse functionality.

D. It makes the collapsible content slide up or down.

Solution

1. Step 1: Understand the role of collapse-horizontal

   This class changes the collapse animation direction from vertical (up/down) to horizontal (left/right).

2. Step 2: Compare with default collapse behavior

   By default, Bootstrap collapses content vertically. Adding collapse-horizontal changes this to horizontal sliding.

3. Final Answer:

   It makes the collapsible content slide left or right instead of up or down. -> Option A

4. Quick Check:

   collapse-horizontal = horizontal slide [OK]

Hint: Remember: horizontal means left-right slide, not up-down [OK]

Common Mistakes:

• Thinking it changes color or disables collapse
• Confusing horizontal with vertical collapse
• Assuming it works without Bootstrap JS

2. Which of the following is the correct way to start a horizontal collapse in Bootstrap?

easy

A. <div class='collapse-vertical' id='myCollapse'></div>

B. <div class='horizontal-collapse' id='myCollapse'></div>

C. <div class='collapse-horizontal'></div>

D. <div class='collapse collapse-horizontal' id='myCollapse'></div>

Solution

1. Step 1: Identify correct Bootstrap classes for horizontal collapse

   The correct classes are collapse and collapse-horizontal together on the element.

2. Step 2: Check the syntax of options

   <div class='collapse collapse-horizontal' id='myCollapse'></div> uses both classes and includes an id for toggling, which is required for Bootstrap collapse to work.

3. Final Answer:

   <div class='collapse collapse-horizontal' id='myCollapse'></div> -> Option D

4. Quick Check:

   Use both collapse and collapse-horizontal classes [OK]

Hint: Always combine collapse with collapse-horizontal for horizontal effect [OK]

Common Mistakes:

• Using only collapse-horizontal without collapse
• Using wrong class names like collapse-vertical
• Missing the id attribute for toggling

3. Given this code snippet, what will happen when the button is clicked?

<button class='btn btn-primary' type='button' data-bs-toggle='collapse' data-bs-target='#collapseExample'>Toggle</button>
<div class='collapse collapse-horizontal' id='collapseExample' style='width: 200px;'>Content</div>

medium

A. The content slides vertically, expanding or collapsing height.

B. The content slides horizontally, expanding or collapsing width.

C. Nothing happens because width is set inline.

D. The button causes a page reload.

Solution

1. Step 1: Analyze the collapse classes and attributes

   The div has collapse and collapse-horizontal classes, so it will collapse horizontally.

2. Step 2: Understand the effect of inline width

   The inline style sets width to 200px, which is necessary for horizontal collapse to know the size to expand or collapse.

3. Final Answer:

   The content slides horizontally, expanding or collapsing width. -> Option B

4. Quick Check:

   collapse-horizontal + width = horizontal slide [OK]

Hint: Horizontal collapse needs width set to animate properly [OK]

Common Mistakes:

• Assuming vertical slide happens by default
• Thinking inline width disables collapse
• Expecting page reload on button click

4. What is wrong with this horizontal collapse code?

<div class='collapse-horizontal' id='myCollapse'>Content</div>
<button data-bs-toggle='collapse' data-bs-target='#myCollapse'>Toggle</button>

medium

A. Missing the main collapse class on the div.

B. Button is missing the type='button' attribute.

C. The id attribute should be on the button, not the div.

D. The collapse-horizontal class should be on the button.

Solution

1. Step 1: Check required classes for collapse

   Bootstrap requires the collapse class on the collapsible element for functionality.

2. Step 2: Identify missing class in code

   The div only has collapse-horizontal but lacks collapse, so it won't collapse properly.

3. Final Answer:

   Missing the main collapse class on the div. -> Option A

4. Quick Check:

   collapse class is mandatory for collapse [OK]

Hint: Always include collapse class with collapse-horizontal [OK]

Common Mistakes:

• Forgetting the collapse class
• Misplacing id attribute
• Assuming button needs collapse-horizontal

5. You want to create a horizontal collapse panel that starts collapsed and expands to 300px wide when toggled. Which code snippet correctly achieves this with accessibility in mind?

hard

A. <button class='btn btn-info' type='button' data-bs-toggle='collapse' data-bs-target='#panel'>Toggle Panel</button>
<div class='collapse collapse-horizontal' id='panel' style='height: 300px;'>Panel Content</div>

B. <button class='btn btn-info' data-toggle='collapse' data-target='#panel'>Toggle Panel</button>
<div class='collapse-horizontal' id='panel' style='width: 300px;'>Panel Content</div>

C. <button class='btn btn-info' type='button' data-bs-toggle='collapse' data-bs-target='#panel' aria-expanded='false' aria-controls='panel'>Toggle Panel</button>
<div class='collapse collapse-horizontal' id='panel' style='width: 300px;'>Panel Content</div>

D. <button class='btn btn-info' type='button' data-bs-toggle='collapse' data-bs-target='#panel' aria-expanded='true' aria-controls='panel'>Toggle Panel</button>
<div class='collapse collapse-horizontal' id='panel' style='width: 300px;'>Panel Content</div>

Solution

1. Step 1: Check button attributes for accessibility

   <button class='btn btn-info' type='button' data-bs-toggle='collapse' data-bs-target='#panel' aria-expanded='false' aria-controls='panel'>Toggle Panel</button>
   <div class='collapse collapse-horizontal' id='panel' style='width: 300px;'>Panel Content</div>

   includes aria-expanded='false' and aria-controls='panel', which help screen readers understand the toggle state.

2. Step 2: Verify collapse classes and styles

   The div has both collapse and collapse-horizontal classes and sets width to 300px, which is correct for horizontal collapse.

3. Final Answer:

   <button class='btn btn-info' type='button' data-bs-toggle='collapse' data-bs-target='#panel' aria-expanded='false' aria-controls='panel'>Toggle Panel</button> <div class='collapse collapse-horizontal' id='panel' style='width: 300px;'>Panel Content</div> -> Option C

4. Quick Check:

   Use aria attributes + collapse + collapse-horizontal + width [OK]

Hint: Add aria-expanded and aria-controls for accessible toggles [OK]

Common Mistakes:

• Using data-toggle instead of data-bs-toggle
• Setting height instead of width for horizontal collapse
• Missing aria attributes for accessibility