Multi-target collapse in Bootsrap - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

How does multi-target collapse work in Bootstrap?

In Bootstrap, when you use a button to toggle multiple collapse targets at once, what happens when the button is clicked?

A Only the first targeted collapse element toggles, others remain unchanged.

B The button toggles all collapse elements but only one can be visible at a time.

C All targeted collapse elements toggle their visibility simultaneously.

D The button toggles the visibility of the first target and hides the rest.

💡 Hint

Think about what happens when multiple IDs are listed in the data-bs-target attribute.

When a button targets multiple collapse elements using a selector list, Bootstrap toggles each targeted element's visibility at the same time.

📝 Syntax

intermediate

Identify the correct syntax for multi-target collapse button

Which of the following button elements correctly toggles two collapse elements with IDs #panel1 and #panel2 simultaneously?

A <button class="btn btn-primary" data-bs-toggle="collapse" data-bs-target="#panel1, #panel2">Toggle Panels</button>

B <button class="btn btn-primary" data-toggle="collapse" data-target="#panel1 #panel2">Toggle Panels</button>

C <button class="btn btn-primary" data-bs-toggle="collapse" data-bs-target="#panel1;#panel2">Toggle Panels</button>

D <button class="btn btn-primary" data-bs-toggle="collapse" data-bs-target="#panel1 #panel2">Toggle Panels</button>

💡 Hint

Remember the correct attribute names and how to separate multiple selectors.

Bootstrap uses data-bs-toggle and data-bs-target attributes. Multiple targets are separated by a comma and space.

❓ rendering

advanced

What is the visual result of this multi-target collapse code?

Given the following HTML snippet, what will the user see after clicking the button once?

<button class="btn btn-secondary" data-bs-toggle="collapse" data-bs-target="#box1, #box2">Toggle Boxes</button>
<div id="box1" class="collapse show">Box 1 Content</div>
<div id="box2" class="collapse">Box 2 Content</div>

A Both Box 1 and Box 2 remain visible because Box 1 was already shown.

B Box 1 hides and Box 2 shows, so both boxes toggle their visibility.

C Only Box 2 toggles visibility; Box 1 stays visible.

D Both boxes hide and disappear from view.

💡 Hint

Check the initial visibility states and what toggling does to each.

Box 1 starts visible (show class), Box 2 hidden. Clicking toggles both: Box 1 hides, Box 2 shows.

❓ selector

advanced

Which CSS selector targets all collapse elements toggled by a multi-target button?

If a button toggles multiple collapse elements with IDs #panelA and #panelB, which CSS selector correctly selects both panels?

A #panelA #panelB

B #panelA + #panelB

C .collapse #panelA, .collapse #panelB

D #panelA, #panelB

💡 Hint

Think about how to select multiple elements by ID in CSS.

Using a comma separates selectors, so #panelA, #panelB selects both elements.

❓ accessibility

expert

How to ensure accessibility for a multi-target collapse button?

Which ARIA attribute should be used on a button that toggles multiple collapse regions to properly inform screen readers?

A Use <code>aria-controls</code> listing all target IDs separated by spaces.

B Use <code>aria-expanded</code> with a comma-separated list of true/false values.

C Use <code>aria-labelledby</code> referencing the button's own ID.

D Use <code>aria-hidden</code> set to false on the button.

💡 Hint

ARIA attributes help screen readers know which elements the button controls.

The aria-controls attribute should list all IDs of the elements the button toggles, separated by spaces, so assistive tech can identify them.