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.

Practice

1. What is the main visual difference when using the accordion-flush class in Bootstrap's accordion component?

easy

A. It removes the default background and borders between accordion items for a seamless look.

B. It adds extra padding inside each accordion item for better spacing.

C. It changes the accordion headers to use a different font style.

D. It makes the accordion items collapsible only on hover.

Solution

1. Step 1: Understand the accordion-flush class purpose

   The accordion-flush class is designed to remove the default background color and borders between accordion items.

2. Step 2: Visual effect of accordion-flush

   This creates a seamless, flush look where accordion items appear connected without spacing or borders.

3. Final Answer:

   It removes the default background and borders between accordion items for a seamless look. -> Option A

4. Quick Check:

   accordion-flush = seamless borderless accordion [OK]

Hint: Remember flush means no gaps or borders between items [OK]

Common Mistakes:

• Thinking it adds padding instead of removing borders
• Confusing flush with changing fonts or colors
• Assuming it changes accordion behavior on hover

2. Which of the following is the correct way to apply the flush style to a Bootstrap accordion?

easy

A. <div class='accordion-flush' id='myAccordion'>

B. <div class='accordion accordion-flush' id='myAccordion'>

C. <div class='accordion flush' id='myAccordion'>

D. <div class='accordion-flush accordion' id='myAccordion'>

Solution

1. Step 1: Check Bootstrap class naming conventions

   Bootstrap requires the base class accordion plus the modifier accordion-flush together on the same element.

2. Step 2: Verify correct class order and syntax

   The correct syntax is class='accordion accordion-flush'. Other options miss the base class or use incorrect class names.

3. Final Answer:

   <div class='accordion accordion-flush' id='myAccordion'> -> Option B

4. Quick Check:

   Base + flush classes together = correct syntax [OK]

Hint: Always include base class 'accordion' with 'accordion-flush' [OK]

Common Mistakes:

• Using only 'accordion-flush' without 'accordion'
• Swapping class order incorrectly
• Using 'flush' alone as a class

3. Given the following code snippet, what will be the visual result in the browser?

<div class='accordion accordion-flush' id='accordionExample'>
  <div class='accordion-item'>
    <h2 class='accordion-header' id='headingOne'>
      <button class='accordion-button collapsed' type='button' data-bs-toggle='collapse' data-bs-target='#collapseOne' aria-expanded='false' aria-controls='collapseOne'>
        Item 1
      </button>
    </h2>
    <div id='collapseOne' class='accordion-collapse collapse' aria-labelledby='headingOne' data-bs-parent='#accordionExample'>
      <div class='accordion-body'>Content 1</div>
    </div>
  </div>
</div>

medium

A. An accordion with flush style but Item 1 expanded by default.

B. An accordion with default borders and Item 1 expanded by default.

C. An accordion with flush style: no borders between items and a collapsed button for Item 1.

D. An accordion with default style and all items collapsed.

Solution

1. Step 1: Identify the accordion style

   The accordion-flush class is applied, so the accordion will have no borders between items (flush style).

2. Step 2: Check the button state and collapse class

   The button has class collapsed and the collapse div has class collapse (not show), so the item is collapsed by default.

3. Final Answer:

   An accordion with flush style: no borders between items and a collapsed button for Item 1. -> Option C

4. Quick Check:

   Flush + collapsed button = An accordion with flush style: no borders between items and a collapsed button for Item 1. [OK]

Hint: Look for 'accordion-flush' and 'collapsed' classes to predict style and state [OK]

Common Mistakes:

• Assuming default borders appear with flush class
• Thinking collapsed button means expanded content
• Confusing 'collapse' and 'show' classes

4. You wrote this Bootstrap accordion with flush variant, but the borders still appear between items. What is the likely cause?

<div class='accordion flush' id='accordionExample'>
  <div class='accordion-item'> ... </div>
</div>

medium

A. Missing the base accordion class alongside accordion-flush.

B. Accordion items must have flush class individually.

C. Not including Bootstrap JavaScript file.

D. Using flush instead of accordion-flush class.

Solution

1. Step 1: Check the class names used

   The code uses class='accordion flush', but the correct flush variant class is accordion-flush.

2. Step 2: Understand effect of incorrect class

   Using flush alone does nothing; the flush style is not applied, so borders remain visible.

3. Final Answer:

   Using flush instead of accordion-flush class. -> Option D

4. Quick Check:

   Correct flush class is 'accordion-flush' not 'flush' [OK]

Hint: Use exact class 'accordion-flush' for flush style [OK]

Common Mistakes:

• Typing 'flush' instead of 'accordion-flush'
• Forgetting to include 'accordion' base class
• Assuming JS affects border styles

5. You want to create a flush accordion with three items where only one item can be open at a time. Which of the following code snippets correctly implements this behavior?

hard

A. <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'>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 1</div>
</div>
</div>
<!-- Repeat for items 2 and 3 with unique IDs and same data-bs-parent -->
</div>

B. <div class='accordion accordion-flush' id='accordionFlushExample'>
<div class='accordion-item'>
<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'>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 1</div>
</div>
</div>
<!-- Items 2 and 3 missing data-bs-parent attribute -->
</div>

C. <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'>Item 1</button>
</h2>
<div id='flush-collapseOne' class='accordion-collapse collapse' aria-labelledby='flush-headingOne'>
<div class='accordion-body'>Content 1</div>
</div>
</div>
<!-- Items 2 and 3 with data-bs-parent but missing unique IDs -->
</div>

D. <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'>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 1</div>
</div>
</div>
<!-- Items 2 and 3 with duplicate IDs and missing data-bs-parent -->
</div>

Solution

1. Step 1: Confirm flush style and unique IDs

   <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'>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 1</div>
       </div>
     </div>
     <!-- Repeat for items 2 and 3 with unique IDs and same data-bs-parent -->
   </div>

   correctly uses accordion accordion-flush and unique IDs for each item and collapse panel.

2. Step 2: Check data-bs-parent attribute for exclusive open behavior

   <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'>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 1</div>
       </div>
     </div>
     <!-- Repeat for items 2 and 3 with unique IDs and same data-bs-parent -->
   </div>

   includes data-bs-parent='#accordionFlushExample' on each collapse div, ensuring only one item opens at a time.

3. Final Answer:

   Option A correctly implements a flush accordion with exclusive open items. -> Option A

4. Quick Check:

   Flush + unique IDs + data-bs-parent = exclusive open accordion [OK]

Hint: Use data-bs-parent with unique IDs for exclusive flush accordion [OK]

Common Mistakes:

• Missing data-bs-parent causing multiple items open
• Duplicate or missing unique IDs breaking collapse behavior
• Incorrect or missing flush class