How To Create Bootstrap 5 Accordion Menu Easily?

Bootstrap 5 Accordion Menu

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

Steps: To create the Bootstrap 5 accordion menu:

• Add .accordion to the accordion container and also assign a unique id.
• Assign .accordion-item to every child of .accordion the element.
• Assign .accordion-header to <h*> element base class and provide a unique id. Then place a button inside <h*> the element.
• Assign every button to the 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 a 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 a data attribute data-bs-parent="#accordionExample" and assign the 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.

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>

Bootstrap 5 Accordion Flush

To create a 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>

To read more about the Bootstrap 5 accordion menu, click here.