Why expandable content saves space in Bootsrap - Challenge Your Understanding

Challenge - 5 Problems

🧠 Conceptual

intermediate

Why use expandable content in web design?

Which of the following best explains why expandable content helps save space on a webpage?

A It automatically deletes content after a few seconds to save space.

B It duplicates content in smaller boxes to fit more on the screen.

C It hides less important information until the user chooses to see it, reducing clutter.

D It compresses images to reduce file size.

💡 Hint

Think about how showing or hiding information affects what you see on the page.

Expandable content hides details until the user wants to see them. This keeps the page clean and easy to read.

📝 Syntax

intermediate

Bootstrap collapse syntax

Which Bootstrap code snippet correctly creates a button that toggles expandable content?

A <button class="btn btn-primary" toggle="collapse" target="#info">Toggle Info</button><div id="info" class="collapse">Hidden content here</div>

B <button class="btn btn-primary" data-bs-toggle="collapse" data-bs-target="#info">Toggle Info</button><div id="info" class="collapse">Hidden content here</div>

C <button class="btn btn-primary" data-toggle="collapse" href="#info">Toggle Info</button><div id="info" class="collapse">Hidden content here</div>

D <button class="btn btn-primary" data-bs-toggle="expand" data-bs-target="#info">Toggle Info</button><div id="info" class="collapse">Hidden content here</div>

💡 Hint

Bootstrap 5 uses data-bs-toggle and data-bs-target attributes.

Bootstrap 5 requires data-bs-toggle="collapse" and data-bs-target="#id" to toggle collapsible content.

❓ rendering

advanced

Visual effect of expandable content

What will the user see when they click the 'More Details' button in this Bootstrap example?

Bootsrap

<button class="btn btn-secondary" data-bs-toggle="collapse" data-bs-target="#details">More Details</button><div id="details" class="collapse">Here are extra details that were hidden.</div>

A The hidden text 'Here are extra details that were hidden.' appears below the button.

B The button disappears and the text replaces it.

C Nothing changes because the collapse class hides content permanently.

D The page reloads and shows the hidden text.

💡 Hint

Collapse toggles visibility without removing elements.

Clicking the button toggles the hidden content to appear or disappear below it.

❓ selector

advanced

CSS selector for expanded content

Which CSS selector targets the expanded content when a Bootstrap collapse is shown?

A .collapse.expanded

B #collapse:visible

C .collapse[aria-expanded="true"]

D .collapse.show

💡 Hint

Bootstrap adds a class when content is visible.

Bootstrap adds the show class to the collapse element when it is expanded.

❓ accessibility

expert

ARIA attributes for expandable content

Which ARIA attribute should be added to the toggle button to improve accessibility for expandable content?

A aria-expanded="false"

B aria-hidden="true"

C aria-label="collapse content"

D aria-pressed="true"

💡 Hint

This attribute tells screen readers if content is visible or hidden.

The aria-expanded attribute on the toggle button indicates whether the expandable content is currently shown (true) or hidden (false).