Building an Accordion Component with Bootstrap 5.3



Accordion in Bootstrap 5.3 is a UI component that allows you to organize and display collapsible content sections. It provides an intuitive way to present information in a compact and space-efficient manner.

The Accordion component consists of a series of collapsible panels, where each panel consists of a header and a body. The header serves as a clickable element that users can interact with to expand or collapse the corresponding panel's body content.

When a panel is expanded, its body content is revealed, and when it is collapsed, the content is hidden. Only one panel can be open at a time, meaning that when a panel is expanded, any other open panels will automatically collapse.

Bootstrap 5.3 provides a range of classes and JavaScript functionality to easily implement the Accordion component. By utilizing the appropriate CSS classes, you can customize the appearance of the accordion to match your design requirements.

Furthermore, Bootstrap 5.3 includes optional collapse animations, allowing for smooth and visually appealing transitions when expanding or collapsing panels.

The Accordion component in Bootstrap 5.3 is a valuable tool for creating organized and interactive content layouts, such as FAQs, product descriptions, or any scenario where you want to present information in a collapsible manner while optimizing space utilization.

<div class="col-md-12">
  <p class="fw-semibold text-primary border-bottom border-primary py-3">Accordion in Bootstrap</p>

  <div class="accordion mt-5" id="accordion1">
    <div class="accordion-item">
      <h2 class="accordion-header">
        <button data-bs-toggle="collapse" data-bs-target="#box" class="accordion-button" type="button">Question 1</button>
      </h2>
      <div id="box" class="accordion-collapse collapse show" data-bs-parent="#accordion1">
        <div class="accordion-body">
          <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatum iusto corrupti enim quas doloribus ad, provident repellendus excepturi natus dignissimos modi distinctio porro reprehenderit voluptas, facere sequi nostrum illum quod?</p>
        </div>
      </div>
    </div>

    <div class="accordion-item">
      <h2 class="accordion-header">
        <button data-bs-toggle="collapse" data-bs-target="#box2" class="accordion-button" type="button">Question 2</button>
      </h2>
      <div id="box2" class="accordion-collapse collapse" data-bs-parent="#accordion1">
        <div class="accordion-body">
          <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatum iusto corrupti enim quas doloribus ad, provident repellendus excepturi natus dignissimos modi distinctio porro reprehenderit voluptas, facere sequi nostrum illum quod?</p>
        </div>
      </div>
    </div>

    <div class="accordion-item">
      <h2 class="accordion-header">
        <button data-bs-toggle="collapse" data-bs-target="#box3" class="accordion-button" type="button">Question 3</button>
      </h2>
      <div id="box3" class="accordion-collapse collapse" data-bs-parent="#accordion1">
        <div class="accordion-body">
          <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatum iusto corrupti enim quas doloribus ad, provident repellendus excepturi natus dignissimos modi distinctio porro reprehenderit voluptas, facere sequi nostrum illum quod?</p>
        </div>
      </div>
    </div>
</div>

Accordion with Flush in Bootstrap

Accordion with Flush is a variation of the Accordion component in Bootstrap 5.3 that provides a sleek and seamless appearance by removing the borders and spacing between the panels. This design approach is often used to achieve a modern and streamlined look.

In an Accordion with Flush, the panels are aligned edge-to-edge, creating a continuous and visually cohesive accordion layout. The absence of borders and gaps between panels allows for a more fluid and integrated presentation of content.

By using the appropriate CSS classes provided by Bootstrap 5.3, you can easily implement the Accordion with Flush style. The classes typically involve adding the "accordion-flush" class to the parent container element of the accordion.

The functionality of the Accordion with Flush remains the same as the regular Accordion component. Each panel consists of a header and a body, and users can expand or collapse panels by interacting with the headers. Only one panel can be open at a time, and the collapse animation can still be applied for a smooth transition.

<div class="accordion accordion-flush mt-5" id="accordion2">
    <div class="accordion-item">
      <h2 class="accordion-header">
        <button data-bs-toggle="collapse" data-bs-target="#box21" class="accordion-button" type="button">Question 1</button>
      </h2>
      <div id="box21" class="accordion-collapse collapse show" data-bs-parent="#accordion2">
        <div class="accordion-body">
          <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatum iusto corrupti enim quas doloribus ad, provident repellendus excepturi natus dignissimos modi distinctio porro reprehenderit voluptas, facere sequi nostrum illum quod?</p>
        </div>
      </div>
    </div>

    <div class="accordion-item">
      <h2 class="accordion-header">
        <button data-bs-toggle="collapse" data-bs-target="#box22" class="accordion-button" type="button">Question 2</button>
      </h2>
      <div id="box22" class="accordion-collapse collapse" data-bs-parent="#accordion2">
        <div class="accordion-body">
          <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatum iusto corrupti enim quas doloribus ad, provident repellendus excepturi natus dignissimos modi distinctio porro reprehenderit voluptas, facere sequi nostrum illum quod?</p>
        </div>
      </div>
    </div>

    <div class="accordion-item">
      <h2 class="accordion-header">
        <button data-bs-toggle="collapse" data-bs-target="#box23" class="accordion-button" type="button">Question 3</button>
      </h2>
      <div id="box23" class="accordion-collapse collapse" data-bs-parent="#accordion2">
        <div class="accordion-body">
          <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatum iusto corrupti enim quas doloribus ad, provident repellendus excepturi natus dignissimos modi distinctio porro reprehenderit voluptas, facere sequi nostrum illum quod?</p>
        </div>
      </div>
    </div>
</div>
  1. accordion: This class should be added to the parent container of the Accordion component.
  2. accordion-item: This class is applied to each individual panel or item within the Accordion.
  3. accordion-header: This class should be added to the header element of each panel. It represents the clickable area that users can interact with to expand or collapse the panel.
  4. accordion-button: This class is added to the button element within the header. It indicates that it serves as a trigger for expanding or collapsing the panel.
  5. accordion-collapse: This class is added to the collapsible content container within each panel. It defines the area that expands or collapses when the panel is toggled.
  6. collapse: This class is used in conjunction with accordion-collapse to define the collapsible content within each panel.
  7. show: This class is applied to the accordion-collapse element when a panel is in the expanded state. It displays the content of the panel.

Example

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Accordion</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css" />
  </head>
  <body>
    <div class="container mt-5">
      <div class="row">
        <div class="col-md-12">
          <p class="fw-semibold text-primary border-bottom border-primary py-3">Accordion in Bootstrap</p>

          <div class="accordion mt-5" id="accordion1">
            <div class="accordion-item">
              <h2 class="accordion-header">
                <button data-bs-toggle="collapse" data-bs-target="#box" class="accordion-button" type="button">Question 1</button>
              </h2>
              <div id="box" class="accordion-collapse collapse show" data-bs-parent="#accordion1">
                <div class="accordion-body">
                  <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatum iusto corrupti enim quas doloribus ad, provident repellendus excepturi natus dignissimos modi distinctio porro reprehenderit voluptas, facere sequi nostrum illum quod?</p>
                </div>
              </div>
            </div>

            <div class="accordion-item">
              <h2 class="accordion-header">
                <button data-bs-toggle="collapse" data-bs-target="#box2" class="accordion-button" type="button">Question 2</button>
              </h2>
              <div id="box2" class="accordion-collapse collapse" data-bs-parent="#accordion1">
                <div class="accordion-body">
                  <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatum iusto corrupti enim quas doloribus ad, provident repellendus excepturi natus dignissimos modi distinctio porro reprehenderit voluptas, facere sequi nostrum illum quod?</p>
                </div>
              </div>
            </div>

            <div class="accordion-item">
              <h2 class="accordion-header">
                <button data-bs-toggle="collapse" data-bs-target="#box3" class="accordion-button" type="button">Question 3</button>
              </h2>
              <div id="box3" class="accordion-collapse collapse" data-bs-parent="#accordion1">
                <div class="accordion-body">
                  <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatum iusto corrupti enim quas doloribus ad, provident repellendus excepturi natus dignissimos modi distinctio porro reprehenderit voluptas, facere sequi nostrum illum quod?</p>
                </div>
              </div>
            </div>
          </div>

          <p class="fw-semibold text-primary border-bottom border-primary py-3">Accordion with Flush in Bootstrap</p>
          <p>Add <mark>.accordion-flush</mark> to remove some borders and rounded corners to render accordions edge-to-edge with their parent container.</p>
          <div class="accordion accordion-flush mt-5" id="accordion2">
            <div class="accordion-item">
              <h2 class="accordion-header">
                <button data-bs-toggle="collapse" data-bs-target="#box21" class="accordion-button" type="button">Question 1</button>
              </h2>
              <div id="box21" class="accordion-collapse collapse show" data-bs-parent="#accordion2">
                <div class="accordion-body">
                  <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatum iusto corrupti enim quas doloribus ad, provident repellendus excepturi natus dignissimos modi distinctio porro reprehenderit voluptas, facere sequi nostrum illum quod?</p>
                </div>
              </div>
            </div>

            <div class="accordion-item">
              <h2 class="accordion-header">
                <button data-bs-toggle="collapse" data-bs-target="#box22" class="accordion-button" type="button">Question 2</button>
              </h2>
              <div id="box22" class="accordion-collapse collapse" data-bs-parent="#accordion2">
                <div class="accordion-body">
                  <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatum iusto corrupti enim quas doloribus ad, provident repellendus excepturi natus dignissimos modi distinctio porro reprehenderit voluptas, facere sequi nostrum illum quod?</p>
                </div>
              </div>
            </div>

            <div class="accordion-item">
              <h2 class="accordion-header">
                <button data-bs-toggle="collapse" data-bs-target="#box23" class="accordion-button" type="button">Question 3</button>
              </h2>
              <div id="box23" class="accordion-collapse collapse" data-bs-parent="#accordion2">
                <div class="accordion-body">
                  <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatum iusto corrupti enim quas doloribus ad, provident repellendus excepturi natus dignissimos modi distinctio porro reprehenderit voluptas, facere sequi nostrum illum quod?</p>
                </div>
              </div>
            </div>
          </div>

          <p class="fw-semibold text-primary border-bottom border-primary py-3">Accordion Always open in Bootstrap</p>
          <p>Omit the <mark>data-bs-parent</mark> attribute on each .accordion-collapse to make accordion items stay open when another item is opened.</p>
          <div class="accordion mt-5" id="accordion3">
            <div class="accordion-item">
              <h2 class="accordion-header">
                <button data-bs-toggle="collapse" data-bs-target="#box31" class="accordion-button" type="button">Question 1</button>
              </h2>
              <div id="box31" class="accordion-collapse collapse show">
                <div class="accordion-body">
                  <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatum iusto corrupti enim quas doloribus ad, provident repellendus excepturi natus dignissimos modi distinctio porro reprehenderit voluptas, facere sequi nostrum illum quod?</p>
                </div>
              </div>
            </div>

            <div class="accordion-item">
              <h2 class="accordion-header">
                <button data-bs-toggle="collapse" data-bs-target="#box32" class="accordion-button" type="button">Question 2</button>
              </h2>
              <div id="box32" class="accordion-collapse collapse">
                <div class="accordion-body">
                  <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatum iusto corrupti enim quas doloribus ad, provident repellendus excepturi natus dignissimos modi distinctio porro reprehenderit voluptas, facere sequi nostrum illum quod?</p>
                </div>
              </div>
            </div>

            <div class="accordion-item">
              <h2 class="accordion-header">
                <button data-bs-toggle="collapse" data-bs-target="#box33" class="accordion-button" type="button">Question 3</button>
              </h2>
              <div id="box33" class="accordion-collapse collapse">
                <div class="accordion-body">
                  <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatum iusto corrupti enim quas doloribus ad, provident repellendus excepturi natus dignissimos modi distinctio porro reprehenderit voluptas, facere sequi nostrum illum quod?</p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!--Row End-->
      </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </body>
</html>
Live Preview

Bootstrap 5.3X Tutorial

Learn All in Tamil © Designed & Developed By Tutor Joes | Privacy Policy | Terms & Conditions