bootstrap extract accordion functionality code example

Example 1: bootstrap accordion

<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>This is the first item's accordion body.</strong> It is
            hidden by default, until the collapse plugin adds the appropriate
            classes that we use to style each element. These classes control the
            overall appearance, as well as the showing and hiding via CSS
            transitions. You can modify any of this with custom CSS or
            overriding our default variables. It's also worth noting that just
            about any HTML can go within the <code>.accordion-body</code>,
            though the transition does limit overflow.
         </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>This is the second item's accordion body.</strong> It is
            hidden by default, until the collapse plugin adds the appropriate
            classes that we use to style each element. These classes control the
            overall appearance, as well as the showing and hiding via CSS
            transitions. You can modify any of this with custom CSS or
            overriding our default variables. It's also worth noting that just
            about any HTML can go within the <code>.accordion-body</code>,
            though the transition does limit overflow.
         </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 is the third item's accordion body.</strong> It is
            hidden by default, until the collapse plugin adds the appropriate
            classes that we use to style each element. These classes control the
            overall appearance, as well as the showing and hiding via CSS
            transitions. You can modify any of this with custom CSS or
            overriding our default variables. It's also worth noting that just
            about any HTML can go within the <code>.accordion-body</code>,
            though the transition does limit overflow.
         </div>
      </div>
   </div>
</div>

Example 2: open one accordion at a time bootstrap

Notice that each panel has a data-parent which targets the parent div with the 
ID #panels.

<div class="panel-group" id="panels">
    <div class="panel panel-default">
        <div class="collapsed" data-toggle="collapse" data-parent="#panels" data-target="#firstPanel">
             <h4>First header</h4>    
        </div>
        <div id="firstPanel" class="panel-collapse collapse">
            <div>Content.</div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="collapsed" data-toggle="collapse" data-parent="#panels" data-target="#secondPanel">
             <h4>Second header</h4>

        </div>
        <div id="secondPanel" class="panel-collapse collapse">
            <div>Other content.</div>
        </div>
    </div>
</div>