Bootstrap 5 Accordion

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

Steps:To create bootstrap 5 accordion menu:

Add .accordion to the accordion container and also assign a unique id.
Assign .accordion-item to the 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 unique id and point it to 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.

Example

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.

Code Explanation

Note:In this example, the bootstrap accordion concept is used on the basis of above mention steps.

Bootstrap 5 Accordion Flush

To create bootstrap 5 accordion flush, add .accordion-flush to remove the default background color, some borders, and some 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.

Code Explanation

Note:In this example, the bootstrap accordion-flush concept is used to remove the default background color, some borders, and some rounded corners.

Online Test / Quiz

Question set 1

Bootstrap 5 Accordion

Example

Source Code

Source Code : Output

Accordion Item #1

Accordion Item #2

Accordion Item #3

Code Explanation

Bootstrap 5 Accordion Flush

Source Code

Source Code : Output

Accordion Item #1

Accordion Item #2

Accordion Item #3

Code Explanation

Online Test / Quiz

Our Tutorials