What are different Accordion Components in Bootstrap ?

Bootstrap Accordion Component allows you to create collapsible content panels for presenting information in a space-saving and organized manner. Here are the different accordion components available in Bootstrap:

The table below illustrates the accordion components alongside their description.

Component	Description
Accordion Container	The main container holding all accordion items, created using <div> with class .accordion.
Accordion Item	Individual collapsible content panel within the accordion, consisting of a header and body section. Created using <div> with class .accordion-item.
Accordion Header	The visible part of the accordion item for user interaction typically contains a clickable element. Created using <button> or <a> with class .accordion-button.
Accordion Body	Collapsible content section that expands or collapses when the associated header is clicked. Created using <div> with classes .accordion-collapse and .collapse.
Accordion Toggle Icon	Optional icon or indicator within the header to visually indicate the accordion item’s state. Achieved using CSS classes or icons from libraries like Font Awesome.

Syntax:

<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">
        Content for Accordion Item #1
      </div>
    </div>
  </div>
  <!-- More accordion items can be added here -->
</div>

Bootstrap 5 Accordion

• Flush: By adding the .accordion-flush class we can easily remove the default background color, borders, and some rounded corners to render accordions edge-to-edge with their parent container.
• Always Open: To make accordion items stay open when another item is opened, omit the data-bs-parent.
• SASS: We can change the default values of the accordion using Bootstrap 5 SASS variables.

Ref: https://www.geeksforgeeks.org/bootstrap-5-accordion/