Bootstrap Accordion

Bootstrap accordion menus are used to manage a large amount of content and navigation lists.

Steps:To create a Bootstrap 5 Accordion Menus:

Add .accordion to the accordion container and also assign a unique ID.
Assign .accordion-item to every child of .accordion element.
Assign .accordion-header to <h*> element base class and provide unique ID. Then place a button inside <h*> element.
Assign every button to data attribute data-bs-toggle="collapse" , .accordion-button & add data attribute data-bs-target="#AccordionBodyContainerId" and assign respective accordion body container ID that will be preceded by hash character(#).
Assign .accordion-collapse.collapse to the accordion body parent container, also assign a unique ID and point it to the button's data attribute data-bs-target and add data attribute data-bs-parent="#accordionExample" and assign accordion unique ID inside it that will be preceded by the hash character.
Write text content inside .accordion-body.
Add .show to one of the accordion body parent container base classes to show its content.

Note: It is most useful to hide and show a large amount of data.

Source Code

          <div class="accordion" id="accordionExample">
  <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="#accordionExample">
      <div class="accordion-body"><strong>First Accodion Heading</strong> This is first accodion content.</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="#accordionExample">
      <div class="accordion-body"><strong>Second Accodion Heading</strong> This is second accodion content.</div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingThree">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
        Accordion Item #3
      </button>
    </h2>
    <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
      <div class="accordion-body"><strong>This Accodion Heading</strong> This is thid accodion content.</div>
    </div>
  </div>
</div>

Try it now

Source Code : Output

First Accodion Heading This is first accodion content.

Second Accodion Heading This is second accodion content.

This Accodion Heading This is thid accodion content.

Accordion Flush

To create accordion flush, add .accordion-flush class. It removes the default background color, borders, and rounded corners to render accordions edge-to-edge with their parent container.

Source Code

          <div class="accordion accordion-flush" id="accordionFlushConcept">
  <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="#accordionFlushConcept">
      <div class="accordion-body">This is the first item's accordion body content, which is intended to demonstrate the <code>.accordion-flush</code> class.</div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header" id="flush-headingTwo">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo">
        Accordion Item #2
      </button>
    </h2>
    <div id="flush-collapseTwo" class="accordion-collapse collapse" aria-labelledby="flush-headingTwo" data-bs-parent="#accordionFlushConcept">
      <div class="accordion-body">This is the second item's accordion body content, which is intended to demonstrate the <code>.accordion-flush</code> class.</div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header" id="flush-headingThree">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseThree" aria-expanded="false" aria-controls="flush-collapseThree">
        Accordion Item #3
      </button>
    </h2>
    <div id="flush-collapseThree" class="accordion-collapse collapse" aria-labelledby="flush-headingThree" data-bs-parent="#accordionFlushConcept">
      <div class="accordion-body">This is the second item's accordion body content, which is intended to demonstrate the <code>.accordion-flush</code> class.</div>
    </div>
  </div>
</div>

Try it now

Source Code : Output

This is the first item's accordion body content, which is intended to demonstrate the .accordion-flush class.

This is the second item's accordion body content, which is intended to demonstrate the .accordion-flush class.

Online Test / Quiz

Question set 1

Web Tutorials

Html Tutorial HTML

Javascript Tutorial JAVASCRIPT

Css Tutorial CSS

Bootstrap 5 Tutorial BOOTSTRAP 5

Bootstrap 4 Tutorial BOOTSTRAP 4