Prev Next

Accordion: Detailed Explanation and Customization

The Bootstrap 5 Accordion component allows you to create collapsible content sections that toggle open and close. Accordions are commonly used for FAQs or showing/hiding sections of content.

Key Topics

Basic Accordion

Create a simple accordion using the accordion class and Bootstrap's data attributes for toggling content.

<div class="accordion" id="basicAccordion">
    <div class="accordion-item">
        <h2 class="accordion-header" id="headingOne">
            <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                Accordion Item #1
            </button>
        </h2>
        <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#basicAccordion">
            <div class="accordion-body">
                This is the first item's accordion body.
            </div>
        </div>
    </div>
    <div class="accordion-item">
        <h2 class="accordion-header" id="headingTwo">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                Accordion Item #2
            </button>
        </h2>
        <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#basicAccordion">
            <div class="accordion-body">
                This is the second item's accordion body.
            </div>
        </div>
    </div>
</div>

Explanation: The accordion class groups multiple collapsible items, each with a header and collapsible body. Use data-bs-toggle="collapse" and data-bs-target attributes to toggle the visibility of content.

Custom Styling for Accordions

Customize the accordion's appearance using utility classes or custom CSS.

<style>
    .custom-accordion .accordion-button {
        background-color: #f8f9fa;
        color: #0d6efd;
        font-weight: bold;
    }
    .custom-accordion .accordion-button:focus {
        box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
    }
</style>
<div class="accordion custom-accordion" id="customAccordion">
    <div class="accordion-item">
        <h2 class="accordion-header" id="customHeading">
            <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#customCollapse" aria-expanded="true" aria-controls="customCollapse">
                Custom Styled Accordion
            </button>
        </h2>
        <div id="customCollapse" class="accordion-collapse collapse show" aria-labelledby="customHeading" data-bs-parent="#customAccordion">
            <div class="accordion-body">
                This accordion item has custom styling applied.
            </div>
        </div>
    </div>
</div>

Explanation: Custom CSS classes like .custom-accordion allow you to change colors, padding, and other styles for accordion items.

Accordion with Icons

Add icons to accordion headers using Bootstrap Icons or Font Awesome for enhanced visual appeal.

<div class="accordion" id="iconAccordion">
    <div class="accordion-item">
        <h2 class="accordion-header" id="iconHeading">
            <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#iconCollapse" aria-expanded="true" aria-controls="iconCollapse">
                <i class="bi bi-plus-circle me-2"></i>Accordion with Icon
            </button>
        </h2>
        <div id="iconCollapse" class="accordion-collapse collapse show" aria-labelledby="iconHeading" data-bs-parent="#iconAccordion">
            <div class="accordion-body">
                This accordion item includes an icon in its header.
            </div>
        </div>
    </div>
</div>

Explanation: Add an icon element inside the accordion header to visually enhance the toggle button.

Complete Accordion Example

The following example combines multiple features of the accordion component, including custom styles and icons.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap Accordion Example</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
</head>
<body>
    <div class="container my-4">
        <h2 class="text-center">Bootstrap Accordion</h2>
        <div class="accordion" id="completeAccordion">
            <div class="accordion-item">
                <h2 class="accordion-header" id="headingComplete">
                    <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseComplete" aria-expanded="true" aria-controls="collapseComplete">
                        <i class="bi bi-chevron-down me-2"></i>Accordion with Features
                    </button>
                </h2>
                <div id="collapseComplete" class="accordion-collapse collapse show" aria-labelledby="headingComplete" data-bs-parent="#completeAccordion">
                    <div class="accordion-body">
                        This accordion combines custom styles and icons for a polished look.
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Explanation: This complete example showcases a customized accordion with icons, custom styles, and collapsible functionality.

Key Takeaways

  • Use the accordion class to create collapsible content sections.
  • Customize accordion styles using utility classes or custom CSS.
  • Add icons to accordion headers for better visual hierarchy.
  • Combine custom styles and icons for a professional, user-friendly design.
Prev Next