Bootstrap 5 Accordion

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

Steps:To create an accordion menu:

  • Step1: Add .accordion to the accordion container and also assign a unique id.
  • Step2:Assign .accordion-item to the every child of .accordion element.
  • Step3: Assign .accordion-header to <h*> element base class and provide unique id.Then place a button inside <h*> element.
  • Step4: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(#).
  • Step5: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.
  • Step6:Write text content inside .accordion-body.
  • Step7: Add .show to one of the accordion body parent container base classes to show its content.

General Syntax

      <div class="accordion" id="accordionExample">
  <div class="accordion-item">
    <b 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>
    </b>
    <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>
    
Try It Now

Source Code

    <div class="accordion" id="accordionExample">
  <div class="accordion-item">
    <b 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>
    </b>
    <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">
    <b 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>
    </b>
    <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">
    <b 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>
    </b>
    <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 yourself

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.

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

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.

General Syntax

      <div class="accordion accordion-flush" id="accordionFlushConcept">
  <div class="accordion-item">
    <b 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>
    </b>
    <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>
    
Try It Now

Source Code

    <div class="accordion accordion-flush" id="accordionFlushConcept">
  <div class="accordion-item">
    <b 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>
    </b>
    <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">
    <b 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>
    </b>
    <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">
    <b 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>
    </b>
    <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 yourself

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.
This is the second item's accordion body content, which is intended to demonstrate the .accordion-flush class.

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
Web Tutorials
Bootstrap 5 Accordion
Html Tutorial HTML
Css Tutorial CSS
Bootstrap 5 Tutorial BOOTSTRAP 5
Bootstrap 4 Tutorial BOOTSTRAP 4
Materialize CSS Tutorial MATERIALIZE CSS