Multi-target collapse in Bootsrap - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a button that toggles multiple collapsible elements using Bootstrap.

Bootsrap

<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="[1]" aria-expanded="false" aria-controls="collapseOne collapseTwo">
  Toggle Both
</button>

Drag options to blanks, or click blank then click option'

A"#collapseOne, #collapseTwo"

B"collapseOne collapseTwo"

C".collapseOne, .collapseTwo"

D"#collapseOne #collapseTwo"

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting the # before IDs.

Using spaces instead of commas to separate targets.

Using class selectors instead of IDs.

The data-bs-target attribute should list the IDs of the collapsible elements separated by a comma, each prefixed with #.

2fill in blank

medium

Complete the code to define two collapsible sections with correct IDs for multi-target collapse.

Bootsrap

<div class="collapse" id="[1]">
  <div class="card card-body">
    Content for first collapse.
  </div>
</div>
<div class="collapse" id="[1]">
  <div class="card card-body">
    Content for second collapse.
  </div>
</div>

Drag options to blanks, or click blank then click option'

Acollapse

BcollapseTwo

CcollapseOne

Dcollapse1

Attempts:

3 left

💡 Hint

Common Mistakes

Using the same ID for both collapsible sections.

Not matching IDs with the button's target selectors.

Each collapsible section must have a unique id. Here, the first uses collapseOne.

3fill in blank

hard

Fix the error in the button code to correctly toggle two collapsible elements.

Bootsrap

<button class="btn btn-secondary" type="button" data-bs-toggle="collapse" data-bs-target=[1] aria-expanded="false" aria-controls="collapseA collapseB">
  Toggle Sections
</button>

Drag options to blanks, or click blank then click option'

A"collapseA collapseB"

B"#collapseA, #collapseB"

C".collapseA .collapseB"

D"collapseA, collapseB"

Attempts:

3 left

💡 Hint

Common Mistakes

Omitting quotes around the target string.

Using spaces instead of commas to separate targets.

Not prefixing IDs with #.

The data-bs-target must be a string with IDs prefixed by # and separated by commas.

4fill in blank

hard

Fill both blanks to create a multi-target collapse button and two collapsible sections with matching IDs.

Bootsrap

<button class="btn btn-info" type="button" data-bs-toggle="collapse" data-bs-target=[1] aria-expanded="false" aria-controls="sectionOne sectionTwo">
  Toggle Sections
</button>
<div class="collapse" id=[2]>
  <div class="card card-body">Section One content.</div>
</div>

Drag options to blanks, or click blank then click option'

A"#sectionOne, #sectionTwo"

B"sectionOne sectionTwo"

CsectionOne

DsectionTwo

Attempts:

3 left

💡 Hint

Common Mistakes

Using spaces instead of commas in data-bs-target.

Not prefixing IDs with # in data-bs-target.

Mismatching the collapsible div's id with the button's targets.

The button's data-bs-target must list the IDs with # and commas. The collapsible section's id must match one of those IDs.

5fill in blank

hard

Fill all three blanks to create a multi-target collapse button and two collapsible sections with correct IDs and content.

Bootsrap

<button class="btn btn-success" type="button" data-bs-toggle="collapse" data-bs-target=[1] aria-expanded="false" aria-controls="panelA panelB">
  Toggle Panels
</button>
<div class="collapse" id=[2]>
  <div class="card card-body">Content for Panel A.</div>
</div>
<div class="collapse" id=[3]>
  <div class="card card-body">Content for Panel B.</div>
</div>

Drag options to blanks, or click blank then click option'

A"#panelA, #panelB"

BpanelA

CpanelB

DpanelC

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect or mismatched IDs.

Not prefixing IDs with # in data-bs-target.

Using an ID not targeted by the button.

The button targets both panels by their IDs with # and commas. Each collapsible div must have an ID matching those targets.

Practice

1. What does the data-bs-target attribute do in a Bootstrap multi-target collapse button?

easy

A. It specifies multiple elements to show or hide when the button is clicked.

B. It changes the button color when clicked.

C. It adds animation to the button itself.

D. It disables the button after one click.

Solution

1. Step 1: Understand the role of data-bs-target

   This attribute tells Bootstrap which elements to toggle visibility for when the button is clicked.

2. Step 2: Recognize multi-target usage

   When multiple IDs are separated by commas in data-bs-target, all those elements collapse or expand together.

3. Final Answer:

   It specifies multiple elements to show or hide when the button is clicked. -> Option A

4. Quick Check:

   Multi-target collapse = toggle multiple elements [OK]

Hint: Remember: data-bs-target controls which sections toggle [OK]

Common Mistakes:

• Thinking it changes button style
• Confusing it with data-bs-toggle
• Assuming it disables the button

2. Which of the following is the correct syntax to target two collapsible sections with IDs #section1 and #section2 in one button using Bootstrap?

easy

A. Toggle

B. Toggle

C. Toggle

D. Toggle

Solution

1. Step 1: Identify correct separator for multiple targets

   Bootstrap requires commas to separate multiple IDs in data-bs-target.

2. Step 2: Check each option's syntax

   <button data-bs-toggle="collapse" data-bs-target="#section1,#section2">Toggle</button> uses commas correctly: #section1,#section2. Others use spaces, semicolons, or spaces with dot selectors which are invalid here.

3. Final Answer:

   <button data-bs-toggle="collapse" data-bs-target="#section1,#section2">Toggle</button> -> Option D

4. Quick Check:

   Multiple IDs separated by commas = correct syntax [OK]

Hint: Use commas to separate multiple IDs in data-bs-target [OK]

Common Mistakes:

• Using spaces instead of commas
• Using semicolons or other separators
• Mixing class selectors with IDs

3. Given this HTML snippet, what happens when the button is clicked?

<button class="btn btn-primary" data-bs-toggle="collapse" data-bs-target="#panel1,#panel2">Toggle Panels</button>
<div id="panel1" class="collapse show">Panel 1 Content</div>
<div id="panel2" class="collapse">Panel 2 Content</div>

medium

A. Only panel2 will toggle; panel1 stays visible.

B. Both panels will toggle: panel1 will hide, panel2 will show.

C. Only panel1 will toggle; panel2 stays hidden.

D. Nothing happens because multiple targets are not supported.

Solution

1. Step 1: Understand initial states

   Panel1 has class show so it is visible. Panel2 does not, so it is hidden.

2. Step 2: Effect of clicking the button with multi-target collapse

   Click toggles both panels: visible panel1 will hide, hidden panel2 will show.

3. Final Answer:

   Both panels will toggle: panel1 will hide, panel2 will show. -> Option B

4. Quick Check:

   Multi-target toggles all targets together [OK]

Hint: Toggle button flips visibility of all targeted panels [OK]

Common Mistakes:

• Assuming only first panel toggles
• Thinking multi-target collapse is unsupported
• Confusing initial visibility states

4. What is wrong with this button code if it does not toggle both #box1 and #box2 collapses?

<button data-bs-toggle="collapse" data-bs-target="#box1 #box2">Toggle Boxes</button>

medium

A. The IDs in data-bs-target should be separated by commas, not spaces.

B. The button is missing the class "btn".

C. The data-bs-toggle attribute should be "dropdown" instead of "collapse".

D. The IDs should not have the # symbol in data-bs-target.

Solution

1. Step 1: Check the separator between multiple targets

   Bootstrap requires commas to separate multiple IDs in data-bs-target, not spaces.

2. Step 2: Verify other attributes

   Class "btn" is optional for functionality, "collapse" is correct toggle type, and IDs must include # in selector.

3. Final Answer:

   The IDs in data-bs-target should be separated by commas, not spaces. -> Option A

4. Quick Check:

   Use commas, not spaces, between IDs [OK]

Hint: Separate multiple IDs with commas, not spaces [OK]

Common Mistakes:

• Using spaces instead of commas
• Confusing toggle types
• Removing # from IDs

5. You want a button to toggle three collapsible sections: #info, #details, and #summary. Which of these is the best complete HTML snippet to achieve this with Bootstrap multi-target collapse?

hard

A. Toggle All
Info content
Details content
Summary content

B. Toggle All
Info content
Details content
Summary content

C. Toggle All
Info content
Details content
Summary content

D. Toggle All
Info content
Details content
Summary content

Solution

1. Step 1: Check data-bs-target syntax

   <button class="btn btn-info" data-bs-toggle="collapse" data-bs-target="#info,#details,#summary">Toggle All</button> <div id="info" class="collapse">Info content</div> <div id="details" class="collapse">Details content</div> <div id="summary" class="collapse">Summary content</div> correctly uses commas and includes # before each ID, which is required.

2. Step 2: Verify collapsible sections and initial states

   <button class="btn btn-info" data-bs-toggle="collapse" data-bs-target="#info,#details,#summary">Toggle All</button> <div id="info" class="collapse">Info content</div> <div id="details" class="collapse">Details content</div> <div id="summary" class="collapse">Summary content</div> sets all sections with class "collapse" (hidden initially), which is typical for toggling. <button class="btn btn-info" data-bs-toggle="collapse" data-bs-target="#info,#details,#summary">Toggle All</button> <div id="info" class="collapse show">Info content</div> <div id="details" class="collapse show">Details content</div> <div id="summary" class="collapse show">Summary content</div> shows all sections visible initially, which is valid but not best for toggle demonstration.

3. Final Answer:

   <button class="btn btn-info" data-bs-toggle="collapse" data-bs-target="#info,#details,#summary">Toggle All</button> <div id="info" class="collapse">Info content</div> <div id="details" class="collapse">Details content</div> <div id="summary" class="collapse">Summary content</div> -> Option C

4. Quick Check:

   Correct syntax + hidden sections = best multi-target toggle [OK]

Hint: Use commas and # for IDs; start sections collapsed [OK]

Common Mistakes:

• Using spaces instead of commas in targets
• Omitting # in selectors
• Starting all sections visible (class show) when toggle expected