Accordion flush variant in Bootsrap - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ rendering

intermediate

What is the visual difference of the accordion-flush class in Bootstrap Accordion?

Consider a Bootstrap accordion with and without the accordion-flush class. What visual effect does accordion-flush produce?

A It removes the default background and borders between accordion items, making them flush with the parent container edges.

B It adds extra padding and shadows around each accordion item for emphasis.

C It changes the accordion headers to use a different font and color scheme.

D It disables the collapse animation and makes all items always expanded.

💡 Hint

Think about how the accordion items look when they are 'flush' against each other and the container.

The accordion-flush class removes the default background-color, borders, and rounded corners from accordion items. This makes the accordion items appear flush with the container edges and each other, creating a cleaner, borderless look.

📝 Syntax

intermediate

Which Bootstrap accordion markup correctly applies the flush variant?

Given the following options, which snippet correctly uses the flush variant of Bootstrap accordion?

A

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

B

<div class="accordion accordion-flush" 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">Content for item 1.</div>
    </div>
  </div>
</div>

C

<div class="accordion flush" 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">Content for item 1.</div>
    </div>
  </div>
</div>

D

<div class="accordion-flush" 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">Content for item 1.</div>
    </div>
  </div>
</div>

💡 Hint

The flush class must be on the main accordion container, combined with the base accordion class.

The flush variant requires adding accordion-flush alongside accordion on the main container. The other options either miss the base class or put flush on the wrong element.

❓ selector

advanced

Which CSS selector targets only the flush variant accordion items in Bootstrap?

You want to style only the accordion items inside a flush variant accordion. Which selector correctly targets them?

A .accordion .accordion-item.accordion-flush

B .accordion-item.accordion-flush

C .accordion-flush > .accordion-item

D .accordion-flush .accordion-item

💡 Hint

Remember flush is a class on the container, not on the items themselves.

The flush variant is applied on the container with class accordion-flush. To select its child items, use .accordion-flush .accordion-item. Option D only selects direct children, which works but is less flexible. Option D is the best general selector.

❓ layout

advanced

How does the accordion-flush variant affect the layout spacing of accordion items?

What layout change happens to accordion items when using the flush variant compared to the default accordion?

A It changes the accordion to use CSS grid layout instead of flexbox.

B It adds extra margin between items to separate them visually.

C It removes the default margin and border radius, making items align tightly without gaps.

D It increases the padding inside each accordion header for better spacing.

💡 Hint

Flush means no extra space or border around items.

The flush variant removes the default border radius and margins, so accordion items appear tightly stacked without gaps or rounded corners.

❓ accessibility

expert

Which ARIA attribute is essential for accessibility in a Bootstrap flush accordion button?

In a flush variant accordion, which ARIA attribute on the button ensures screen readers know the expanded state of the item?

A aria-expanded

B aria-hidden

C aria-pressed

D aria-label

💡 Hint

This attribute toggles between true and false to indicate if content is visible.

The aria-expanded attribute on the accordion button indicates whether the associated content panel is expanded or collapsed. This is critical for screen readers to convey the current state.