Accordion flush variant in Bootsrap - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a Bootstrap accordion with the flush style.

Bootsrap

<div class="accordion [1]" id="accordionFlushExample">
  <div class="accordion-item">
    <h2 class="accordion-header" id="flush-headingOne">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
        Accordion Item #1
      </button>
    </h2>
    <div id="flush-collapseOne" class="accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">
      <div class="accordion-body">This is the first item's accordion body.</div>
    </div>
  </div>
</div>

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

Aaccordion-light

Baccordion-flush

Caccordion-bordered

Daccordion-rounded

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'accordion-light' or other non-existent classes instead of 'accordion-flush'.

Forgetting to add the flush class to the main accordion div.

The class 'accordion-flush' removes the default background and borders, creating a flush accordion style.

2fill in blank

medium

Complete the code to make the accordion button collapsed by default.

Bootsrap

<button class="accordion-button [1]" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo">
  Accordion Item #2
</button>

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

Ashow

Bopen

Cactive

Dcollapsed

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'show' which is for expanded content, not buttons.

Using 'active' or 'open' which are not Bootstrap accordion button classes.

The class 'collapsed' on the button makes the accordion item collapsed by default.

3fill in blank

hard

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

Bootsrap

<div id="flush-collapseThree" class="accordion-collapse collapse" aria-labelledby="[1]" data-bs-parent="#accordionFlushExample">
  <div class="accordion-body">This is the third item's accordion body.</div>
</div>

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

Aflush-headingThree

Bflush-collapseThree

Cflush-headerThree

Dflush-buttonThree

Attempts:

3 left

💡 Hint

Common Mistakes

Using the collapse div's own id or button id instead of the header id.

Mismatching the aria-labelledby value causing accessibility issues.

The 'aria-labelledby' attribute must match the id of the accordion header, which is 'flush-headingThree'.

4fill in blank

hard

Fill both blanks to create a flush accordion item with a button and collapse div linked properly.

Bootsrap

<div class="accordion-item">
  <h2 class="accordion-header" id="[1]">
    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#[2]" aria-expanded="false" aria-controls="[2]">
      Accordion Item #4
    </button>
  </h2>
  <div id="[2]" class="accordion-collapse collapse" aria-labelledby="[1]" data-bs-parent="#accordionFlushExample">
    <div class="accordion-body">This is the fourth item's accordion body.</div>
  </div>
</div>

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

Aflush-headingFour

Bflush-collapseFour

Cflush-itemFour

Dflush-buttonFour

Attempts:

3 left

💡 Hint

Common Mistakes

Using the same id for header and collapse div.

Mismatching ids between button and collapse div.

The header id is 'flush-headingFour' and the collapse div id is 'flush-collapseFour' to link button and content correctly.

5fill in blank

hard

Fill all three blanks to create a flush accordion item with unique ids and correct button-collapse linkage.

Bootsrap

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

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

Aaccordion-flush

Bflush-headingOne

Cflush-heading1

Daccordion-light

Attempts:

3 left

💡 Hint

Common Mistakes

Using inconsistent or incorrect ids for header and collapse div.

Forgetting the flush class on the accordion container.

The accordion uses 'accordion-flush' class, and the header id 'flush-headingOne' is used consistently for aria-labelledby and button linkage.