Horizontal collapse in Bootsrap - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ rendering

intermediate

What is the visual result of this Bootstrap horizontal collapse code?

Given the following HTML snippet using Bootstrap 5, what will the user see when the button is clicked?

Bootsrap

<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">Toggle</button>
<div class="collapse collapse-horizontal" id="collapseExample">
  <div class="card card-body" style="width: 200px;">
    This content collapses horizontally.
  </div>
</div>

A The button does not trigger any change because the collapse-horizontal class is invalid in Bootstrap 5.

B The content inside the card instantly disappears and reappears vertically without animation when the button is clicked.

C The content inside the card smoothly expands and collapses horizontally from left to right when the button is clicked.

D The content inside the card expands vertically with a fade effect when the button is clicked.

💡 Hint

Focus on the class 'collapse-horizontal' and what it does in Bootstrap 5.

The collapse-horizontal class in Bootstrap 5 makes the collapse animation happen horizontally, expanding or collapsing the width of the content smoothly. The button toggles this effect on the target element.

❓ selector

intermediate

Which CSS selector targets the horizontal collapse content correctly?

You want to style the content inside a Bootstrap horizontal collapse with a red border. Which CSS selector will correctly select the content inside the collapse with id 'myCollapse'?

A #myCollapse.collapse-horizontal > .card-body

B .collapse-horizontal #myCollapse .card-body

C #myCollapse > .collapse-horizontal .card-body

D #myCollapse.collapse-horizontal .card-body

💡 Hint

Remember that the collapse element has both the id and the class 'collapse-horizontal'.

The element with id myCollapse also has the class collapse-horizontal. To select the .card-body inside it, use #myCollapse.collapse-horizontal .card-body. This selects the element with both the id and class, then its descendant .card-body.

🧠 Conceptual

advanced

What ARIA attribute is essential for accessibility in a Bootstrap horizontal collapse button?

Which ARIA attribute must be included on the button toggling a horizontal collapse to inform screen readers about the expanded state?

A aria-expanded

B aria-hidden

C aria-pressed

D aria-label

💡 Hint

This attribute changes between true and false to indicate if the content is visible.

The aria-expanded attribute on the toggle button indicates whether the collapsible content is currently expanded (true) or collapsed (false). This helps screen readers understand the state of the content.

📝 Syntax

advanced

What error occurs if you omit the 'data-bs-target' attribute in a Bootstrap horizontal collapse button?

Consider this button code: <button class="btn btn-primary" data-bs-toggle="collapse">Toggle</button>. What happens when you click it?

A Nothing happens because Bootstrap does not know which element to collapse.

B The page reloads because of missing target attribute.

C A JavaScript error is thrown in the console about missing target.

D The button toggles all collapse elements on the page.

💡 Hint

Think about how Bootstrap identifies the collapse element to toggle.

Without the data-bs-target or href attribute, Bootstrap's collapse plugin does not know which element to toggle, so clicking the button does nothing.

❓ layout

expert

How does Bootstrap's horizontal collapse affect layout flow compared to vertical collapse?

When using collapse-horizontal, how does the collapsing content affect the surrounding elements' layout differently than the default vertical collapse?

A Horizontal collapse hides content without affecting layout, while vertical collapse pushes content down.

B Horizontal collapse changes the width of the content, pushing or pulling adjacent elements horizontally, while vertical collapse changes height and affects vertical spacing.

C Both horizontal and vertical collapse only change opacity and do not affect layout flow.

D Horizontal collapse overlays content on top of others without resizing, vertical collapse resizes content.

💡 Hint

Think about how width and height changes affect page layout differently.

Horizontal collapse changes the width of the collapsing element, causing adjacent elements to shift horizontally. Vertical collapse changes height, affecting vertical spacing. This difference impacts how the page layout adjusts during the animation.

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