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