Bootstrap Accordion

You've been making excellent progress with Bootstrap. So far, you’ve learned about buttons, forms, and modals. In this lesson, you'll expand your toolkit with another powerful component: the Accordion. Accordions allow you to display information in a collapsible format, making it an efficient way to manage content-heavy sections on your web pages.

In this lesson, you are going to discover how to create and use accordions using Bootstrap. Accordions are especially useful for presenting FAQs, grouping large sets of data, or even structuring articles. By the end of this lesson, you'll be able to create an engaging accordion widget with a code similar to this one:

<div class="container mt-5">
    <div class="accordion" id="corgiFactsAccordion">
        <div class="accordion-item">
            <h2 class="accordion-header">
                <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne">
                    Fascinating Corgi Facts
                </button>
            </h2>
            <div id="collapseOne" class="accordion-collapse collapse show">
                <div class="accordion-body">
                    <strong>Did you know?</strong> Corgis were originally bred for herding sheep and cattle. Their small stature allowed them to dodge kicks and herd animals effectively.
                </div>
            </div>
        </div>
        <div class="accordion-item">
            <h2 class="accordion-header">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo">
                    Corgis and the Royal Family
                </button>
            </h2>
            <div id="collapseTwo" class="accordion-collapse collapse">
                <div class="accordion-body">
                    <strong>A royal favorite!</strong> Corgis have been part of the British Royal Family for decades. Queen Elizabeth II has owned more than 30 Corgis during her reign.
                </div>
            </div>
        </div>
    </div>
</div>

Accordions are UI components that allow you to toggle the visibility of sections of content.

Each section is enclosed in a collapsible container, making it a concise way to display considerable amounts of information without overwhelming the user. Users can click on headers to expand or collapse the sections, revealing or hiding the content inside. Accordions are commonly used in FAQs, data grouping, and structured articles to improve content organization and user experience.

Here are the key Bootstrap classes that make the Accordion:

1. accordion: This class is applied to a parent <div> that wraps all accordion items.

2. accordion-item: Each collapsible section has this class and contains an accordion header and body.

3. accordion-header: Apply this class to the header of each accordion item. It contains a button that uses the following classes and attributes:

   • accordion-button: This class styles the button and enables it to trigger the collapse functionality.
   • collapsed (optional): This class indicates whether the accordion item is collapsed by default.
   • data-bs-toggle="collapse": This attribute enables the collapse behavior on button click.
   • data-bs-target: This attribute points to the corresponding collapsible body.

4. accordion-collapse: This class is applied to the div containing the collapsible content.

   • collapse: This class is used in conjunction with accordion-collapse to create the collapsible effect.
   • show (optional): This class makes the accordion item expanded by default.

Accordions enhance the user experience by allowing users to expand and collapse sections of content at will. This keeps your web pages clean, organized, and easy to navigate, especially when dealing with voluminous information. Having well-structured content can keep users engaged and make their interactions with your website more enjoyable.

Ready to start? Let's move on to the practice section and build some fascinating accordion widgets together.