Collapse component in Bootsrap - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

How does the Bootstrap Collapse component work?

Which statement best describes how the Bootstrap Collapse component controls the visibility of content?

A It uses JavaScript to hide the content by setting visibility to 'hidden' without changing layout.

B It removes the content from the DOM when collapsed and adds it back when expanded.

C It changes the display property between 'block' and 'none' instantly without animation.

D It toggles the height of the content between 0 and its full height using CSS transitions.

💡 Hint

Think about how smooth animations are achieved in Bootstrap Collapse.

The Bootstrap Collapse component uses CSS transitions to animate the height property from 0 to the content's full height and vice versa. This creates a smooth sliding effect when showing or hiding content.

📝 Syntax

intermediate

Identify the correct data attribute to trigger a collapse

Which data attribute correctly triggers a Bootstrap Collapse toggle when added to a button?

A data-collapse="toggle"

B data-toggle="collapse"

C data-target="#collapse"

D data-trigger="collapse"

💡 Hint

Bootstrap uses a specific data attribute to identify toggle elements.

The correct attribute to trigger a collapse toggle in Bootstrap is data-toggle="collapse". This tells Bootstrap's JavaScript to listen for clicks and toggle the collapse.

❓ rendering

advanced

What is the visual result of this Collapse HTML snippet?

Given the following HTML, what will the user see when the page loads?

Bootsrap

<button class="btn btn-primary" data-toggle="collapse" data-target="#info">Toggle Info</button>
<div id="info" class="collapse show">
  <p>This is some collapsible content.</p>
</div>

A The paragraph is visible initially and can be hidden by clicking the button.

B The paragraph is hidden initially and appears when the button is clicked.

C The button is disabled and does not toggle the paragraph visibility.

D The paragraph is always visible and does not collapse.

💡 Hint

Look at the class applied to the collapsible div.

The collapse show classes mean the content is visible on page load. Clicking the button toggles the visibility with animation.

❓ selector

advanced

Which CSS selector targets only expanded collapse elements?

In Bootstrap, which CSS selector matches only the collapse elements that are currently expanded (visible)?

A .collapse[hidden]

B .collapse:not(.show)

C .collapse.show

D .collapse[aria-expanded="false"]

💡 Hint

Expanded collapse elements have a specific class added by Bootstrap.

Bootstrap adds the show class to expanded collapse elements. So .collapse.show selects only those visible elements.

❓ accessibility

expert

Which ARIA attribute correctly reflects the state of a collapse toggle button?

For accessibility, which ARIA attribute should be updated on a button that toggles a Bootstrap Collapse element to indicate its expanded or collapsed state?

A aria-expanded

B aria-hidden

C aria-pressed

D aria-controls

💡 Hint

This attribute is a boolean that tells screen readers if content is visible.

The aria-expanded attribute on the toggle button indicates whether the collapsible content is currently expanded (true) or collapsed (false), improving accessibility.