Why expandable content saves space in Bootsrap - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a button that toggles expandable content using Bootstrap.

Bootsrap

<button class="btn btn-primary" type="button" data-bs-toggle="[1]" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Toggle Content
</button>

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

Acollapse

Btooltip

Cdropdown

Dmodal

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'modal' instead of 'collapse' will open a popup instead of expanding content.

Using 'dropdown' or 'tooltip' will not toggle expandable content.

The data-bs-toggle="collapse" attribute tells Bootstrap to toggle the collapse component, which is used for expandable content.

2fill in blank

medium

Complete the code to define the collapsible content area with the correct Bootstrap class.

Bootsrap

<div class="[1]" id="collapseExample">
  <div class="card card-body">
    This content is hidden until toggled.
  </div>
</div>

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

Adropdown-menu

Bmodal

Ccollapse

Dtooltip

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'modal' class will create a popup instead of expandable content.

Using 'dropdown-menu' or 'tooltip' classes will not work for collapsible content.

The collapse class defines the collapsible content area that expands or collapses when toggled.

3fill in blank

hard

Fix the error in the button code to correctly toggle the collapsible content.

Bootsrap

<button class="btn btn-primary" type="button" data-bs-toggle="[1]" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Toggle Content
</button>

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

Amodal

Bcollapse

Cdropdown

Dtooltip

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'modal' or 'dropdown' will not toggle the collapsible content.

Forgetting to set the correct toggle attribute causes no action on click.

The toggle attribute must be set to collapse to control expandable content properly.

4fill in blank

hard

Fill both blanks to create a collapsible section with a button and content area.

Bootsrap

<button class="btn btn-secondary" type="button" data-bs-toggle="[1]" data-bs-target="#infoCollapse" aria-expanded="false" aria-controls="infoCollapse">
  Show Info
</button>
<div class="[2]" id="infoCollapse">
  <div class="card card-body">
    Extra information shown here.
  </div>
</div>

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

Acollapse

Bmodal

Ddropdown

Attempts:

3 left

💡 Hint

Common Mistakes

Using different classes for toggle and content causes the collapse to fail.

Using 'modal' or 'dropdown' classes here is incorrect.

The button uses data-bs-toggle="collapse" and the content div uses the collapse class to create expandable content.

5fill in blank

hard

Fill all three blanks to create a button that toggles expandable content with accessible attributes.

Bootsrap

<button class="btn btn-info" type="button" data-bs-toggle="[1]" data-bs-target="#detailsCollapse" aria-expanded="[2]" aria-controls="detailsCollapse">
  Details
</button>
<div class="[3]" id="detailsCollapse">
  <div class="card card-body">
    Detailed content goes here.
  </div>
</div>

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

Acollapse

Bfalse

Dtrue

Attempts:

3 left

💡 Hint

Common Mistakes

Setting aria-expanded to 'true' initially makes the content appear expanded.

Using wrong classes breaks the toggle functionality.

The button toggles the collapse component. The aria-expanded attribute starts as false because the content is hidden initially. The content div uses the collapse class.