Accordion flush variant in Bootsrap - Mini Project: Build & Apply

Create a Bootstrap Accordion Flush Variant

📖 Scenario: You are building a simple FAQ section for a website. You want to use Bootstrap's accordion component but with a flush style that removes the default outer borders for a cleaner look.

🎯 Goal: Build a Bootstrap accordion with the accordion-flush class that contains three collapsible items. Each item should have a header button that toggles its content panel.

📋 What You'll Learn

Use Bootstrap 5 accordion component

Apply the accordion-flush class to the accordion container

Create exactly three accordion items

Each accordion item must have a header with a button that toggles the content

Ensure the accordion is accessible with proper aria attributes

💡 Why This Matters

🌍 Real World

Accordions are commonly used on websites to organize content like FAQs, menus, or sections that expand and collapse to save space and improve user experience.

💼 Career

Knowing how to implement Bootstrap components like accordions is useful for front-end developers to quickly build interactive and accessible UI elements that work well on all devices.

1

Create the basic accordion container

Write the HTML code to create a div with id="faqAccordion" and the Bootstrap class accordion. This will be the container for the accordion items.

Bootsrap

Need a hint?

Use a div with id="faqAccordion" and class accordion.

2

Add the flush style to the accordion container

Modify the div with id="faqAccordion" to add the Bootstrap class accordion-flush alongside accordion.

Bootsrap

Need a hint?

Add the class accordion-flush next to accordion in the container div.

3

Add the first accordion item with header and collapse content

Inside the div with id="faqAccordion", add one accordion item. Use a div with class accordion-item. Inside it, add a header h2 with class accordion-header and id="flush-headingOne". Add a button inside the header with class accordion-button collapsed, type="button", data-bs-toggle="collapse", data-bs-target="#flush-collapseOne", aria-expanded="false", and aria-controls="flush-collapseOne". The button text should be "Accordion Item #1". Then add a div with id="flush-collapseOne", class accordion-collapse collapse, aria-labelledby="flush-headingOne", and data-bs-parent="#faqAccordion". Inside this div, add a div with class accordion-body containing the text "This is the first item's accordion body."

Bootsrap

Need a hint?

Follow Bootstrap's accordion item structure carefully. Use the exact IDs and classes as specified.

4

Add the second and third accordion items

Add two more accordion items inside the div with id="faqAccordion". For the second item, use id="flush-headingTwo" for the header, button with data-bs-target="#flush-collapseTwo", and collapse div with id="flush-collapseTwo" and aria-labelledby="flush-headingTwo". The button text is "Accordion Item #2" and the body text is "This is the second item's accordion body." For the third item, use id="flush-headingThree", data-bs-target="#flush-collapseThree", id="flush-collapseThree", and aria-labelledby="flush-headingThree". The button text is "Accordion Item #3" and the body text is "This is the third item's accordion body." Keep the same classes and attributes as the first item for consistency.

Bootsrap

  
    
      
        Accordion Item #1
      
    
    
      
        This is the first item's accordion body.
      
    
  
  

Need a hint?

Copy the structure of the first accordion item and update the IDs and texts for the second and third items exactly as described.