#### Accordions

##### Simple According

##

This is the first item's accordion body. It is shown 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 `.accordion-body`, though the transition does limit overflow.

##

This is the second item's accordion body. 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 `.accordion-body`, though the transition does limit overflow.

##

This is the third item's accordion body. 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 `.accordion-body`, though the transition does limit overflow.

    <div class="card">
      <div class="card-header">
        <h5> Simple According </h5>
          </div>
           <div class="card-body">
            <div class="accordion app-accordion accordion-secondary">
             <div class="accordion-item">
              <h2 class="accordion-header">
               <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"
               data-bs-parent="#accordionExample">
               <div class="accordion-body">
                <strong>This is the first item's accordion body.</strong> It is shown 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">
               <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" 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">
               <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" 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>
      </div>
    </div>

##### Outline According

##

This is the first item's accordion body. It is shown 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 `.accordion-body`, though the transition does limit overflow.

##

This is the second item's accordion body. 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 `.accordion-body`, though the transition does limit overflow.

##

This is the third item's accordion body. 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 `.accordion-body`, though the transition does limit overflow.

    <div class="card">
      <div class="card-header">
        <h5> Outline According </h5>
          </div>
          <div class="card-body">
           <div class="accordion app-accordion accordion-outline-secondary">
            <div class="accordion-item">
             <h2 class="accordion-header">
              <button class="accordion-button" type="button" data-bs-toggle="collapse"
               data-bs-target="#collapseOneOutline" aria-expanded="true"
               aria-controls="collapseOneOutline">
               Accordion Item #1
              </button>
             </h2>
             <div id="collapseOneOutline" class="accordion-collapse collapse show"
              data-bs-parent="#accordionExampleoutlineoutline">
              <div class="accordion-body">
               <strong>This is the first item's accordion body.</strong> It is shown 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">
              <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
               data-bs-target="#collapseTwooutline" aria-expanded="false"
               aria-controls="collapseTwooutline">
               Accordion Item #2
              </button>
             </h2>
             <div id="collapseTwooutline" class="accordion-collapse collapse"
              data-bs-parent="#accordionExampleoutlineoutline">
              <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">
              <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
               data-bs-target="#collapseThreeoutline" aria-expanded="false"
               aria-controls="collapseThreeoutline">
               Accordion Item #3
              </button>
             </h2>
             <div id="collapseThreeoutline" class="accordion-collapse collapse"
              data-bs-parent="#accordionExampleoutlineoutline">
              <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>
      </div>
    </div>

##### Light

##

Placeholder content for this accordion, which is intended to demonstrate the `.accordion-flush` class. This is the first item's accordion body.

##

Placeholder content for this accordion, which is intended to demonstrate the `.accordion-flush` class. This is the second item's accordion body. Let's imagine this being filled with some actual content.

##

Placeholder content for this accordion, which is intended to demonstrate the `.accordion-flush` class. This is the third item's accordion body. Nothing more exciting happening here in terms of content, but just filling up the space to make it look, at least at first glance, a bit more representative of how this would look in a real-world application.

    <div class="card">
      <div class="card-header">
        <h5> Light </h5>
           </div>
            <div class="card-body">
             <div class="accordion app-accordion accordion-light-secondary" id="accordionFlushExample">
              <div class="accordion-item">
               <h2 class="accordion-header">
                <button class="accordion-button" type="button" data-bs-toggle="collapse"
                 data-bs-target="#flush-collapseOne" aria-expanded="true" aria-controls="flush-collapseOne">
                 Accordion Item #1
                </button>
               </h2>
               <div id="flush-collapseOne" class="accordion-collapse show"
                data-bs-parent="#accordionFlushExample">
                <div class="accordion-body">Placeholder content for this accordion, which is intended to
                 demonstrate the <code>.accordion-flush</code> class. This is the first item's accordion
                 body.</div>
               </div>
              </div>
              <div class="accordion-item">
               <h2 class="accordion-header">
                <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"
                data-bs-parent="#accordionFlushExample">
                <div class="accordion-body">Placeholder content for this accordion, which is intended to
                 demonstrate the <code>.accordion-flush</code> class. This is the second item's accordion
                 body. Let's imagine this being filled with some actual content.</div>
               </div>
              </div>
              <div class="accordion-item">
               <h2 class="accordion-header">
                <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"
                data-bs-parent="#accordionFlushExample">
                <div class="accordion-body">Placeholder content for this accordion, which is intended to
                 demonstrate the <code>.accordion-flush</code> class. This is the third item's accordion
                 body. Nothing more exciting happening here in terms of content, but just filling up the
                 space to make it look, at least at first glance, a bit more representative of how this would
                 look in a real-world application.</div>
            </div>
          </div>
        </div>
      </div>
    </div>

##### Flush(No border)

##

Placeholder content for this accordion, which is intended to demonstrate the `.accordion-appflush` class. This is the first item's accordion body.

##

Placeholder content for this accordion, which is intended to demonstrate the `.accordion-appflush` class. This is the second item's accordion body. Let's imagine this being filled with some actual content.

##

Placeholder content for this accordion, which is intended to demonstrate the `.accordion-appflush` class. This is the third item's accordion body. Nothing more exciting happening here in terms of content, but just filling up the space to make it look, at least at first glance, a bit more representative of how this would look in a real-world application.

    <div class="card">
      <div class="card-header">
        <h5> Flush(No border)</h5>
          </div>
          <div class="card-body">
           <div class="accordion app-accordion accordion-flush accordion-secondary"
            id="accordionappflushExample">
            <div class="accordion-item">
          <h2 class="accordion-header">
           <button class="accordion-button" type="button" data-bs-toggle="collapse"
            data-bs-target="#appflush-collapseOne" aria-expanded="true"
            aria-controls="appflush-collapseOne">
            Accordion Item #1
           </button>
          </h2>
          <div id="appflush-collapseOne" class="accordion-collapse show"
           data-bs-parent="#accordionappflushExample">
           <div class="accordion-body">Placeholder content for this accordion, which is intended to
            demonstrate the <code>.accordion-appflush</code> class. This is the first item's accordion
            body.</div>
          </div>
            </div>
            <div class="accordion-item">
          <h2 class="accordion-header">
           <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
            data-bs-target="#appflush-collapseTwo" aria-expanded="false"
            aria-controls="appflush-collapseTwo">
            Accordion Item #2
           </button>
          </h2>
          <div id="appflush-collapseTwo" class="accordion-collapse collapse"
           data-bs-parent="#accordionappflushExample">
           <div class="accordion-body">Placeholder content for this accordion, which is intended to
            demonstrate the <code>.accordion-appflush</code> class. This is the second item's accordion
            body. Let's imagine this being filled with some actual content.</div>
          </div>
            </div>
            <div class="accordion-item">
          <h2 class="accordion-header">
           <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
            data-bs-target="#appflush-collapseThree" aria-expanded="false"
            aria-controls="appflush-collapseThree">
            Accordion Item #3
           </button>
          </h2>
          <div id="appflush-collapseThree" class="accordion-collapse collapse"
           data-bs-parent="#accordionrealExample">
           <div class="accordion-body">Placeholder content for this accordion, which is intended to
            demonstrate the <code>.accordion-appflush</code> class. This is the third item's accordion
            body. Nothing more exciting happening here in terms of content, but just filling up the
            space to make it look, at least at first glance, a bit more representative of how this would
            look in a real-world application.</div>
            </div>
           </div>
        </div>
      </div>
     </div>

##### Frequently Asked Questions(Real Example)

##

Paying your ticket without contesting it can result in a conviction on your driving record. This can have long-lasting consequences such as increased insurance rates, driver's license suspension, employment restrictions, and additional fines imposed by your state's DMV.

##

Absolutely, tickets recorded on your driving history can result in disqualification from driving commercially or obtaining a commercial driver's license (CDL). They can also disqualify you from driving for ride-sharing services such as Uber or Lyft, which require a clean driving record.

##

It really depends on the court your ticket landed in. Some courts move faster than others, but on average, it could take about 1-3 months. This is perfectly normal in the legal process.

                             <div class="card">
                             <div class="card-header">
                             <h5> Frequently Asked Questions(Real Example) </h5>
                             </div>
                             <div class="card-body">
                             <div class="accordion app-accordion accordion-light-secondary" id="accordionPanelsStayOpenExample">
                              <div class="accordion-item">
                              <h2 class="accordion-header">
                              <button class="accordion-button" type="button" data-bs-toggle="collapse"
                               data-bs-target="#panelsStayOpen-collapseOne" aria-expanded="true"
                               aria-controls="panelsStayOpen-collapseOne">
                               <i class="ti ti-message-report me-1 f-s-20"></i> What happens if I just pay my ticket?
                              </button>
                              </h2>
                              <div id="panelsStayOpen-collapseOne" class="accordion-collapse collapse show">
                              <div class="accordion-body">
                               Paying your ticket without contesting it can result in a conviction on your driving record.
                               This can have long-lasting consequences such as increased insurance rates, driver's license
                               suspension, employment restrictions, and additional fines imposed by your state's DMV.
                              </div>
                              </div>
                              </div>
                              <div class="accordion-item">
                              <h2 class="accordion-header">
                              <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                               data-bs-target="#panelsStayOpen-collapseTwo" aria-expanded="false"
                               aria-controls="panelsStayOpen-collapseTwo">
                               <i class="ti ti-ticket me-1 f-s-20"></i> Can this ticket affect my job?
                              </button>
                              </h2>
                              <div id="panelsStayOpen-collapseTwo" class="accordion-collapse collapse">
                              <div class="accordion-body">
                               Absolutely, tickets recorded on your driving history can result in disqualification from
                               driving commercially or obtaining a commercial driver's license (CDL). They can also
                               disqualify you from driving for ride-sharing services such as Uber or Lyft, which require a
                               clean driving record.
                              </div>
                              </div>
                              </div>
                              <div class="accordion-item">
                              <h2 class="accordion-header">
                              <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                               data-bs-target="#panelsStayOpen-collapseThree" aria-expanded="false"
                               aria-controls="panelsStayOpen-collapseThree">
                               <i class="ti ti-transition-bottom me-1 f-s-20"></i> How long does it take to resolve my
                               case?
                              </button>
                              </h2>
                              <div id="panelsStayOpen-collapseThree" class="accordion-collapse collapse">
                              <div class="accordion-body">
                               It really depends on the court your ticket landed in. Some courts move faster than others,
                               but on average, it could take about 1-3 months. This is perfectly normal in the legal
                               process.
                              </div>
                              </div>
                              </div>
                             </div>
                             </div>
                             </div>

##### Left Side Plus Minus Icon

##

Paying your ticket without contesting it can result in a conviction on your driving record. This can have long-lasting consequences such as increased insurance rates, driver's license suspension, employment restrictions, and additional fines imposed by your state's DMV.

##

Absolutely, tickets recorded on your driving history can result in disqualification from driving commercially or obtaining a commercial driver's license (CDL). They can also disqualify you from driving for ride-sharing services such as Uber or Lyft, which require a clean driving record.

##

It really depends on the court your ticket landed in. Some courts move faster than others, but on average, it could take about 1-3 months. This is perfectly normal in the legal process.

                              <div class="card equal-card">
                             <div class="card-header">
                              <h5> Left side plus minus icon </h5>
                             </div>
                             <div class="card-body">
                              <div
                               class="accordion app-accordion accordion-light-primary app-accordion-icon-left app-accordion-plus"
                               id="accordionlefticonExample">
                               <div class="accordion-item">
                                <h2 class="accordion-header">
                                 <button class="accordion-button" type="button" data-bs-toggle="collapse"
                                  data-bs-target="#lefticon-collapseOne" aria-expanded="true"
                                  aria-controls="lefticon-collapseOne">
                                  What happens if I just pay my ticket?
                                 </button>
                                </h2>
                                <div id="lefticon-collapseOne" class="accordion-collapse collapse show">
                                 <div class="accordion-body">
                                  Paying your ticket without contesting it can result in a conviction on your driving record.
                                  This can have long-lasting consequences such as increased insurance rates, driver's license
                                  suspension, employment restrictions, and additional fines imposed by your state's DMV.
                                 </div>
                                </div>
                               </div>
                               <div class="accordion-item">
                                <h2 class="accordion-header">
                                 <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                  data-bs-target="#lefticon-collapseTwo" aria-expanded="false"
                                  aria-controls="lefticon-collapseTwo">
                                  Can this ticket affect my job?
                                 </button>
                                </h2>
                                <div id="lefticon-collapseTwo" class="accordion-collapse collapse">
                                 <div class="accordion-body">
                                  Absolutely, tickets recorded on your driving history can result in disqualification from
                                  driving commercially or obtaining a commercial driver's license (CDL). They can also
                                  disqualify you from driving for ride-sharing services such as Uber or Lyft, which require a
                                  clean driving record.
                                 </div>
                                </div>
                               </div>
                               <div class="accordion-item">
                                <h2 class="accordion-header">
                                 <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                  data-bs-target="#lefticon-collapseThree" aria-expanded="false"
                                  aria-controls="lefticon-collapseThree">
                                  How long does it take to resolve my case?
                                 </button>
                                </h2>
                                <div id="lefticon-collapseThree" class="accordion-collapse collapse">
                                 <div class="accordion-body">
                                  It really depends on the court your ticket landed in. Some courts move faster than others,
                                  but on average, it could take about 1-3 months. This is perfectly normal in the legal
                                  process.
                                 </div>
                                </div>
                               </div>
                              </div>
                             </div>
                            </div>

##### No Icon Indicators

##

Paying your ticket without contesting it can result in a conviction on your driving record. This can have long-lasting consequences such as increased insurance rates, driver's license suspension, employment restrictions, and additional fines imposed by your state's DMV.

##

Absolutely, tickets recorded on your driving history can result in disqualification from driving commercially or obtaining a commercial driver's license (CDL). They can also disqualify you from driving for ride-sharing services such as Uber or Lyft, which require a clean driving record.

##

It really depends on the court your ticket landed in. Some courts move faster than others, but on average, it could take about 1-3 months. This is perfectly normal in the legal process.

    <div class="card">
       <div class="card-header">
       <h5> No icon indicators </h5>
       </div>
       <div class="card-body">
       <div class="accordion app-accordion accordion-light-danger app-accordion-no-icon"
       id="accordionnoiconExample">
       <div class="accordion-item">
       <h2 class="accordion-header">
       <button class="accordion-button" type="button" data-bs-toggle="collapse"
       data-bs-target="#noicon-collapseOne" aria-expanded="true"
       aria-controls="noicon-collapseOne">
       <i class="ti ti-message-report me-1 f-s-20"></i> What happens if I just pay my ticket?
       </button>
       </h2>
       <div id="noicon-collapseOne" class="accordion-collapse collapse show">
       <div class="accordion-body">
       Paying your ticket without contesting it can result in a conviction on your driving record.
       This can have long-lasting consequences such as increased insurance rates, driver's license
       suspension, employment restrictions, and additional fines imposed by your state's DMV.
       </div>
       </div>
       </div>
       <div class="accordion-item">
       <h2 class="accordion-header">
       <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
       data-bs-target="#noicon-collapseTwo" aria-expanded="false"
       aria-controls="noicon-collapseTwo">
       <i class="ti ti-ticket me-1 f-s-20"></i> Can this ticket affect my job?
       </button>
       </h2>
       <div id="noicon-collapseTwo" class="accordion-collapse collapse">
       <div class="accordion-body">
       Absolutely, tickets recorded on your driving history can result in disqualification from
       driving commercially or obtaining a commercial driver's license (CDL). They can also
       disqualify you from driving for ride-sharing services such as Uber or Lyft, which require a
       clean driving record.
       </div>
       </div>
       </div>
       <div class="accordion-item">
       <h2 class="accordion-header">
       <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
       data-bs-target="#noicon-collapseThree" aria-expanded="false"
       aria-controls="noicon-collapseThree">
       <i class="ti ti-transition-bottom me-1 f-s-20"></i> How long does it take to resolve my
       case?
       </button>
       </h2>
       <div id="noicon-collapseThree" class="accordion-collapse collapse">
       <div class="accordion-body">
       It really depends on the court your ticket landed in. Some courts move faster than others,
       but on average, it could take about 1-3 months. This is perfectly normal in the legal
       process.
       </div>
       </div>
       </div>
       </div>
       </div>
      </div>

##### Multi Level Indicators

##

This is the first item's accordion body. It is shown by default.

##

This is the first item's accordion body It is shown by default.

##

This is the second item's accordion body. 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 `.accordion-body`, though the transition does limit overflow.

##

This is the second item's accordion body. 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 `.accordion-body`, though the transition does limit overflow.

    <div class="card equal-card">
          <div class="card-header">
           <h5>Multi level indicators </h5>
          </div>
          <div class="card-body">
           <div class="accordion app-accordion accordion-light-success app-accordion-plus" id="nestingExample">
           <div class="accordion-item">
            <h2 class="accordion-header">
            <button class="accordion-button" type="button" data-bs-toggle="collapse"
          data-bs-target="#nestingcollapseOne" aria-expanded="true" aria-controls="collapseOne">
          This is level one accordion #1
            </button>
            </h2>
            <div id="nestingcollapseOne" class="accordion-collapse collapse show"
            data-bs-parent="#nestingExample">
            <div class="accordion-body">
          <strong>This is the first item's accordion body.</strong> It is shown by default.

          <div class="accordion mt-2 app-accordion app-accordion-icon-left app-accordion-plus"
           id="nestingtwoExample">
           <div class="accordion-item">
           <h2 class="accordion-header">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
            data-bs-target="#nestingtwocollapseOne" aria-expanded="false"
            aria-controls="collapseOne">
            This is level two accordion #1
            </button>
           </h2>
           <div id="nestingtwocollapseOne" class="accordion-collapse collapse"
            data-bs-parent="#nestingtwoExample">
            <div class="accordion-body">
            This is the first item's accordion body It is shown by default.
            </div>
           </div>
           </div>
           <div class="accordion-item">
           <h2 class="accordion-header">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
            data-bs-target="#nestingtwocollapseTwo" aria-expanded="false"
            aria-controls="collapseTwo">
            This is level two accordion #2
            </button>
           </h2>
           <div id="nestingtwocollapseTwo" class="accordion-collapse collapse"
            data-bs-parent="#nestingtwoExample">
            <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>
            </div>
            </div>
           </div>

           <div class="accordion-item">
            <h2 class="accordion-header">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
          data-bs-target="#nestingcollapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          This is level one accordion #2
            </button>
            </h2>
            <div id="nestingcollapseTwo" class="accordion-collapse collapse"
            data-bs-parent="#nestingExample">
            <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>
          </div>
          </div>