Collapse component in Bootsrap - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a button that toggles a collapse element.

Bootsrap

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

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

Acollapse

Bmodal

Cdropdown

Dtooltip

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'modal' or 'dropdown' instead of 'collapse' for the toggle attribute.

The data-bs-toggle="collapse" attribute tells Bootstrap that this button will toggle a collapse element.

2fill in blank

medium

Complete the code to define the collapsible content container with the correct class.

Bootsrap

<div class="[1]" id="collapseExample">
  <div class="card card-body">
    This is some collapsible content.
  </div>
</div>

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

Amodal

Btooltip

Cdropdown-menu

Dcollapse

Attempts:

3 left

💡 Hint

Common Mistakes

Using classes like 'modal' or 'dropdown-menu' instead of 'collapse'.

The collapsible content container must have the collapse class for Bootstrap to recognize it as collapsible.

3fill in blank

hard

Fix the error in the button code to correctly toggle the collapse element.

Bootsrap

<button class="btn btn-secondary" type="button" data-bs-toggle="[1]" data-bs-target="#myCollapse" aria-expanded="false" aria-controls="myCollapse">
  Show/Hide
</button>

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

Amodal

Bcollapse

Cdropdown

Dpopover

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'modal' or 'popover' which do not toggle collapse elements.

The data-bs-toggle attribute must be set to "collapse" to toggle a collapse element.

4fill in blank

hard

Fill both blanks to create a button and a collapsible content area that works together.

Bootsrap

<button class="btn btn-info" type="button" data-bs-toggle="[1]" data-bs-target="#infoCollapse" aria-expanded="false" aria-controls="infoCollapse">
  Info Toggle
</button>
<div class="[2]" id="infoCollapse">
  <div class="card card-body">
    Here is some info content.
  </div>
</div>

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

Acollapse

Bmodal

Ddropdown

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing 'modal' or 'dropdown' with 'collapse' causing toggle failure.

The button's data-bs-toggle and the content container's class must both be "collapse" for the toggle to work.

5fill in blank

hard

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

Bootsrap

<button class="btn btn-success" type="button" data-bs-toggle="[1]" data-bs-target="#collapseContent" aria-expanded="[2]" aria-controls="[3]">
  Toggle Content
</button>

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

Amodal

Bfalse

CcollapseContent

Dcollapse

Attempts:

3 left

💡 Hint

Common Mistakes

Setting aria-expanded to 'true' initially or mismatching aria-controls ID.

The button toggles a collapse, so data-bs-toggle is "collapse". The aria-expanded starts as "false" because content is hidden initially. The aria-controls matches the ID of the collapsible content.