Accordion component in Bootsrap - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a Bootstrap accordion container.

Bootsrap

<div class="accordion" id="[1]">
  <!-- Accordion items go here -->
</div>

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

AaccordionContainer

BaccordionMain

CaccordionExample

DaccordionGroup

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting to add an id attribute to the accordion container.

Using an id that doesn't match the data-bs-parent attribute in items.

The Bootstrap accordion requires an id attribute on the container to link items. "accordionExample" is the common example id.

2fill in blank

medium

Complete the code to create an accordion item header button that toggles the collapse.

Bootsrap

<h2 class="accordion-header" id="headingOne">
  <button class="accordion-button" type="button" data-bs-toggle="[1]" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
    Accordion Item #1
  </button>
</h2>

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

Acollapse

Bmodal

Cdropdown

Dtab

Attempts:

3 left

💡 Hint

Common Mistakes

Using data-bs-toggle="modal" or other incorrect values.

Leaving data-bs-toggle attribute empty.

The button toggles the collapse behavior, so data-bs-toggle must be "collapse".

3fill in blank

hard

Fix the error in the collapse div to correctly link it to the header button.

Bootsrap

<div id="collapseOne" class="accordion-collapse collapse [1]" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
  <div class="accordion-body">
    Content for accordion item #1.
  </div>
</div>

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

Ashow

Bactive

Copen

Dvisible

Attempts:

3 left

💡 Hint

Common Mistakes

Using classes like "active" or "open" which don't control collapse visibility.

Forgetting to add any class to show the content by default.

To have the first accordion item open by default, the collapse div needs the class "show".

4fill in blank

hard

Fill both blanks to create a second accordion item with correct header and collapse ids.

Bootsrap

<h2 class="accordion-header" id="[1]">
  <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
    Accordion Item #2
  </button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="[2]" data-bs-parent="#accordionExample">
  <div class="accordion-body">
    Content for accordion item #2.
  </div>
</div>

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

AheadingTwo

BheadingOne

CcollapseOne

DcollapseTwo

Attempts:

3 left

💡 Hint

Common Mistakes

Using the first item's ids for the second item.

Mismatching header id and aria-labelledby values.

The header id and aria-labelledby must match for the second item, both should be "headingTwo".

5fill in blank

hard

Fill all three blanks to create a third accordion item with correct ids and button state.

Bootsrap

<h2 class="accordion-header" id="[1]">
  <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
    Accordion Item #3
  </button>
</h2>
<div id="[3]" class="accordion-collapse collapse" aria-labelledby="[2]" data-bs-parent="#accordionExample">
  <div class="accordion-body">
    Content for accordion item #3.
  </div>
</div>

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

AheadingThree

BheadingTwo

CcollapseThree

DcollapseTwo

Attempts:

3 left

💡 Hint

Common Mistakes

Reusing ids from previous accordion items.

Mismatching aria-labelledby and header ids.

The third item's header id and aria-labelledby must be "headingThree" and the collapse div id must be "collapseThree".