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.