<div class="card">
  <div class="card-header">
    <h5> آکاردئون پایه </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">
            آیتم آکاردئونی #1
           </button>
          </h2>
          <div id="collapseOne" class="accordion-collapse collapse show"
           data-bs-parent="#accordionExample">
           <div class="accordion-body">
            <strong>این بدنه آکاردئونی اولین آیتم است.</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">
            آیتم آکاردئونی #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">
            آیتم آکاردئونی #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>
      
  

  
<div class="card">
  <div class="card-header">
    <h5> آکاردئون Outline </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">
           آیتم آکاردئونی #1
          </button>
         </h2>
         <div id="collapseOneOutline" class="accordion-collapse collapse show"
          data-bs-parent="#accordionExampleoutlineoutline">
          <div class="accordion-body">
           <strong>این بدنه آکاردئونی اولین آیتم است.</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">
           آیتم آکاردئونی #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">
           آیتم آکاردئونی #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>
      
  

    
<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">
             آیتم آکاردئونی #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">
             آیتم آکاردئونی #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">
             آیتم آکاردئونی #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>
  

   
<div class="card">
  <div class="card-header">
    <h5> Flush (بدون حاشیه)</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">
        آیتم آکاردئونی #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">
        آیتم آکاردئونی #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">
        آیتم آکاردئونی #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>
                        
                    
                  

                    
                      
                         <div class="card">
                         <div class="card-header">
                         <h5> سوالات متداول (مثال واقعی) </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> اگر فقط بلیطم را پرداخت کنم چه اتفاقی می‌افتد؟
                          </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> آیا این جریمه می‌تواند روی شغل من تأثیر بگذارد؟
                          </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>
                        
                    
                  

                    
                     
                          <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">
                              اگر فقط بلیطم را پرداخت کنم چه اتفاقی می‌افتد؟
                             </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">
                              آیا این جریمه می‌تواند روی شغل من تأثیر بگذارد؟
                             </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">
                              چقدر طول می کشد تا پرونده من حل شود؟
                             </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>
                        
                    
                  

<div class="card">
   <div class="card-header">
   <h5> بدون نشانگر آیکون </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> اگر فقط بلیطم را پرداخت کنم چه اتفاقی می‌افتد؟
   </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> آیا این جریمه می‌تواند روی شغل من تأثیر بگذارد؟
   </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>

<div class="card equal-card">
      <div class="card-header">
       <h5>شاخص‌های چند سطحی </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">
      این سطح یک آکاردئون شماره 1 است
        </button>
        </h2>
        <div id="nestingcollapseOne" class="accordion-collapse collapse show"
        data-bs-parent="#nestingExample">
        <div class="accordion-body">
      <strong>این بدنه آکاردئونی اولین آیتم است.</strong> به طور پیش‌فرض نشان داده می‌شود.
    

      <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">
        این آکاردئون درجه دو شماره ۱ است.
        </button>
       </h2>
       <div id="nestingtwocollapseOne" class="accordion-collapse collapse"
        data-bs-parent="#nestingtwoExample">
        <div class="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="#nestingtwocollapseTwo" aria-expanded="false"
        aria-controls="collapseTwo">
        این آکاردئون شماره ۲ سطح دو است.
        </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">
      این آکاردئون شماره ۲ سطح یک است.
        </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>