Bootstrap Cardcomponent to provide unique looking Accordion components that matches Metronic's design standards.
									
                        <div class="accordion accordion-toggle-arrow" id="accordionExample1">
                            <div class="card">
                                <div class="card-header">
                                    <div class="card-title" data-toggle="collapse" data-target="#collapseOne1">
                                        Latest Orders
                                    </div>
                                </div>
                                <div id="collapseOne1" class="collapse show" data-parent="#accordionExample1">
                                    <div class="card-body">
                                        ...
                                    </div>
                                </div>
                            </div>
                            <div class="card">
                                <div class="card-header">
                                    <div class="card-title collapsed" data-toggle="collapse" data-target="#collapseTwo1">
                                        Product Updates
                                    </div>
                                </div>
                                <div id="collapseTwo1" class="collapse" data-parent="#accordionExample1">
                                    <div class="card-body">
                                        ...
                                    </div>
                                </div>
                            </div>
                            <div class="card">
                                <div class="card-header">
                                    <div class="card-title collapsed" data-toggle="collapse" data-target="#collapseThree1">
                                        ...
                                    </div>
                                </div>
                                <div id="collapseThree1" class="collapse" data-parent="#accordionExample1">
                                    <div class="card-body">
                                        ...
                                    </div>
                                </div>
                            </div>
                        </div>
                        
														
                        <div class="accordion accordion-light accordion-toggle-arrow" id="accordionExample2">
             <div class="card">
              <div class="card-header" id="headingOne2">
               <div class="card-title" data-toggle="collapse" data-target="#collapseOne2">
                Recent Reports
               </div>
              </div>
              <div id="collapseOne2" class="collapse show" data-parent="#accordionExample2">
               <div class="card-body">
                ...
               </div>
              </div>
             </div>
             <div class="card">
              <div class="card-header" id="headingTwo2">
               <div class="card-title collapsed" data-toggle="collapse" data-target="#collapseTwo2">
                Accounting Updates
               </div>
              </div>
              <div id="collapseTwo2" class="collapse"  data-parent="#accordionExample2">
               <div class="card-body">
                ...
               </div>
              </div>
             </div>
             <div class="card">
              <div class="card-header" id="headingThree2">
               <div class="card-title collapsed" data-toggle="collapse" data-target="#collapseThree2">
                Latest Payroll
               </div>
              </div>
              <div id="collapseThree2" class="collapse" data-parent="#accordionExample2">
               <div class="card-body">
                ...
               </div>
              </div>
             </div>
            </div>
                        
														
                        <div class="accordion accordion-solid accordion-toggle-plus" id="accordionExample3">
                            <div class="card">
                                <div class="card-header" id="headingOne3">
                                    <div class="card-title" data-toggle="collapse" data-target="#collapseOne3">
                                        Recent Reports
                                    </div>
                                </div>
                                <div id="collapseOne3" class="collapse show" data-parent="#accordionExample3">
                                    <div class="card-body">
                                        ...
                                    </div>
                                </div>
                            </div>
                            <div class="card">
                                <div class="card-header" id="headingTwo3">
                                    <div class="card-title collapsed" data-toggle="collapse" data-target="#collapseTwo3">
                                        Accounting Updates
                                    </div>
                                </div>
                                <div id="collapseTwo3" class="collapse" data-parent="#accordionExample3">
                                    <div class="card-body">
                                        ...
                                    </div>
                                </div>
                            </div>
                            <div class="card">
                                <div class="card-header" id="headingThree3">
                                    <div class="card-title collapsed" data-toggle="collapse" data-target="#collapseThree3">
                                        Latest Payroll
                                    </div>
                                </div>
                                <div id="collapseThree3" class="collapse" data-parent="#accordionExample3">
                                    <div class="card-body">
                                        ...
                                    </div>
                                </div>
                            </div>
                        </div>
                        
														
                        <div class="accordion accordion-light accordion-light-borderless accordion-svg-toggle" id="accordionExample7">
                         <div class="card">
                          <div class="card-header" id="headingOne7">
                           <div class="card-title" data-toggle="collapse" data-target="#collapseOne7">
                            <span class="svg-icon svg-icon-primary">
                             <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                              <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                               <polygon points="0 0 24 0 24 24 0 24"></polygon>
                               <path d="M12.2928955,6.70710318 C11.9023712,6.31657888 11.9023712,5.68341391 12.2928955,5.29288961 C12.6834198,4.90236532 13.3165848,4.90236532 13.7071091,5.29288961 L19.7071091,11.2928896 C20.085688,11.6714686 20.0989336,12.281055 19.7371564,12.675721 L14.2371564,18.675721 C13.863964,19.08284 13.2313966,19.1103429 12.8242777,18.7371505 C12.4171587,18.3639581 12.3896557,17.7313908 12.7628481,17.3242718 L17.6158645,12.0300721 L12.2928955,6.70710318 Z" fill="#000000" fill-rule="nonzero"></path>
                               <path d="M3.70710678,15.7071068 C3.31658249,16.0976311 2.68341751,16.0976311 2.29289322,15.7071068 C1.90236893,15.3165825 1.90236893,14.6834175 2.29289322,14.2928932 L8.29289322,8.29289322 C8.67147216,7.91431428 9.28105859,7.90106866 9.67572463,8.26284586 L15.6757246,13.7628459 C16.0828436,14.1360383 16.1103465,14.7686056 15.7371541,15.1757246 C15.3639617,15.5828436 14.7313944,15.6103465 14.3242754,15.2371541 L9.03007575,10.3841378 L3.70710678,15.7071068 Z" fill="#000000" fill-rule="nonzero" opacity="0.3" transform="translate(9.000003, 11.999999) rotate(-270.000000) translate(-9.000003, -11.999999) "></path>
                              </g>
                             </svg>
                            </span>
                            <div class="card-label pl-4">Product Inventory</div>
                           </div>
                          </div>
                          <div id="collapseOne7" class="collapse show" data-parent="#accordionExample7">
                           <div class="card-body pl-12">
                            ...
                           </div>
                          </div>
                         </div>
                         <div class="card">
                          <div class="card-header" id="headingTwo7">
                           <div class="card-title collapsed" data-toggle="collapse" data-target="#collapseTwo7">
                            <span class="svg-icon svg-icon-primary">
                             <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                              <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                               <polygon points="0 0 24 0 24 24 0 24"></polygon>
                               <path d="M12.2928955,6.70710318 C11.9023712,6.31657888 11.9023712,5.68341391 12.2928955,5.29288961 C12.6834198,4.90236532 13.3165848,4.90236532 13.7071091,5.29288961 L19.7071091,11.2928896 C20.085688,11.6714686 20.0989336,12.281055 19.7371564,12.675721 L14.2371564,18.675721 C13.863964,19.08284 13.2313966,19.1103429 12.8242777,18.7371505 C12.4171587,18.3639581 12.3896557,17.7313908 12.7628481,17.3242718 L17.6158645,12.0300721 L12.2928955,6.70710318 Z" fill="#000000" fill-rule="nonzero"></path>
                               <path d="M3.70710678,15.7071068 C3.31658249,16.0976311 2.68341751,16.0976311 2.29289322,15.7071068 C1.90236893,15.3165825 1.90236893,14.6834175 2.29289322,14.2928932 L8.29289322,8.29289322 C8.67147216,7.91431428 9.28105859,7.90106866 9.67572463,8.26284586 L15.6757246,13.7628459 C16.0828436,14.1360383 16.1103465,14.7686056 15.7371541,15.1757246 C15.3639617,15.5828436 14.7313944,15.6103465 14.3242754,15.2371541 L9.03007575,10.3841378 L3.70710678,15.7071068 Z" fill="#000000" fill-rule="nonzero" opacity="0.3" transform="translate(9.000003, 11.999999) rotate(-270.000000) translate(-9.000003, -11.999999) "></path>
                              </g>
                             </svg>
                            </span>
                            <div class="card-label pl-4">Order Statistics</div>
                           </div>
                          </div>
                          <div id="collapseTwo7" class="collapse" data-parent="#accordionExample7">
                           <div class="card-body pl-12">
                            ...
                           </div>
                          </div>
                         </div>
                         <div class="card">
                          <div class="card-header" id="headingThree7">
                           <div class="card-title collapsed" data-toggle="collapse" data-target="#collapseThree7">
                            <span class="svg-icon svg-icon-primary">
                             <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                              <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                               <polygon points="0 0 24 0 24 24 0 24"></polygon>
                               <path d="M12.2928955,6.70710318 C11.9023712,6.31657888 11.9023712,5.68341391 12.2928955,5.29288961 C12.6834198,4.90236532 13.3165848,4.90236532 13.7071091,5.29288961 L19.7071091,11.2928896 C20.085688,11.6714686 20.0989336,12.281055 19.7371564,12.675721 L14.2371564,18.675721 C13.863964,19.08284 13.2313966,19.1103429 12.8242777,18.7371505 C12.4171587,18.3639581 12.3896557,17.7313908 12.7628481,17.3242718 L17.6158645,12.0300721 L12.2928955,6.70710318 Z" fill="#000000" fill-rule="nonzero"></path>
                               <path d="M3.70710678,15.7071068 C3.31658249,16.0976311 2.68341751,16.0976311 2.29289322,15.7071068 C1.90236893,15.3165825 1.90236893,14.6834175 2.29289322,14.2928932 L8.29289322,8.29289322 C8.67147216,7.91431428 9.28105859,7.90106866 9.67572463,8.26284586 L15.6757246,13.7628459 C16.0828436,14.1360383 16.1103465,14.7686056 15.7371541,15.1757246 C15.3639617,15.5828436 14.7313944,15.6103465 14.3242754,15.2371541 L9.03007575,10.3841378 L3.70710678,15.7071068 Z" fill="#000000" fill-rule="nonzero" opacity="0.3" transform="translate(9.000003, 11.999999) rotate(-270.000000) translate(-9.000003, -11.999999) "></path>
                              </g>
                             </svg>
                            </span>
                            <div class="card-label pl-4">eCommerce Reports</div>
                           </div>
                          </div>
                          <div id="collapseThree7" class="collapse" data-parent="#accordionExample7">
                           <div class="card-body pl-12">
                            ...
                           </div>
                          </div>
                         </div>
                        </div>
                        
														
                        <div class="accordion  accordion-toggle-arrow" id="accordionExample4">
             <div class="card">
              <div class="card-header" id="headingOne4">
               <div class="card-title" data-toggle="collapse" data-target="#collapseOne4">
                <i class="flaticon2-layers-1"></i> User Permissions
               </div>
              </div>
              <div id="collapseOne4" class="collapse show" data-parent="#accordionExample4">
               <div class="card-body">
                ...
               </div>
              </div>
             </div>
             <div class="card">
              <div class="card-header" id="headingTwo4">
               <div class="card-title collapsed" data-toggle="collapse" data-target="#collapseTwo4">
                <i class="flaticon2-copy"></i> Account Settings
               </div>
              </div>
              <div id="collapseTwo4" class="collapse" data-parent="#accordionExample4">
               <div class="card-body">
                ...
               </div>
              </div>
             </div>
             <div class="card">
              <div class="card-header" id="headingThree4">
               <div class="card-title collapsed" data-toggle="collapse" data-target="#collapseThree4">
                <i class="flaticon2-bell-alarm-symbol"></i> Application Options
               </div>
              </div>
              <div id="collapseThree4" class="collapse" data-parent="#accordionExample4">
               <div class="card-body">
                ...
               </div>
              </div>
             </div>
            </div>
                        
														
                        <div class="accordion accordion-light  accordion-toggle-arrow" id="accordionExample5">
             <div class="card">
              <div class="card-header" id="headingOne5">
               <div class="card-title" data-toggle="collapse" data-target="#collapseOne5">
                <i class="flaticon-pie-chart-1"></i> Product Inventory
               </div>
              </div>
              <div id="collapseOne5" class="collapse show" data-parent="#accordionExample5">
               <div class="card-body">
                ...
               </div>
              </div>
             </div>
             <div class="card">
              <div class="card-header" id="headingTwo5">
               <div class="card-title collapsed" data-toggle="collapse" data-target="#collapseTwo5">
                <i class="flaticon2-notification"></i> Order Statistics
               </div>
              </div>
              <div id="collapseTwo5" class="collapse" data-parent="#accordionExample5">
               <div class="card-body">
                ...
               </div>
              </div>
             </div>
             <div class="card">
              <div class="card-header" id="headingThree5">
               <div class="card-title collapsed" data-toggle="collapse" data-target="#collapseThree5">
                <i class="flaticon2-chart"></i> eCommerce Reports
               </div>
              </div>
              <div id="collapseThree5" class="collapse" data-parent="#accordionExample5">
               <div class="card-body">
                ...
               </div>
              </div>
             </div>
            </div>
                        
														
                        <div class="accordion accordion-solid accordion-toggle-plus" id="accordionExample6">
             <div class="card">
              <div class="card-header" id="headingOne6">
               <div class="card-title" data-toggle="collapse" data-target="#collapseOne6">
                <i class="flaticon-pie-chart-1"></i> Product Inventory
               </div>
              </div>
              <div id="collapseOne6" class="collapse show" data-parent="#accordionExample6">
               <div class="card-body">
                ...
               </div>
              </div>
             </div>
             <div class="card">
              <div class="card-header" id="headingTwo6">
               <div class="card-title collapsed" data-toggle="collapse" data-target="#collapseTwo6">
                <i class="flaticon2-notification"></i> Order Statistics
               </div>
              </div>
              <div id="collapseTwo6" class="collapse" data-parent="#accordionExample6">
               <div class="card-body">
                ...
               </div>
              </div>
             </div>
             <div class="card">
              <div class="card-header" id="headingThree6">
               <div class="card-title collapsed" data-toggle="collapse" data-target="#collapseThree6">
                <i class="flaticon2-chart"></i> eCommerce Reports
               </div>
              </div>
              <div id="collapseThree6" class="collapse" data-parent="#accordionExample6">
               <div class="card-body">
                ...
               </div>
              </div>
             </div>
            </div>
                        
														
                <div class="accordion accordion-solid accordion-panel accordion-svg-toggle" id="accordionExample8">
                 <div class="card">
                  <div class="card-header" id="headingOne8">
                   <div class="card-title" data-toggle="collapse" data-target="#collapseOne8">
                    <div class="card-label">Product Inventory</div>
                    <span class="svg-icon">
                     <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                      <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                       <polygon points="0 0 24 0 24 24 0 24"></polygon>
                       <path d="M12.2928955,6.70710318 C11.9023712,6.31657888 11.9023712,5.68341391 12.2928955,5.29288961 C12.6834198,4.90236532 13.3165848,4.90236532 13.7071091,5.29288961 L19.7071091,11.2928896 C20.085688,11.6714686 20.0989336,12.281055 19.7371564,12.675721 L14.2371564,18.675721 C13.863964,19.08284 13.2313966,19.1103429 12.8242777,18.7371505 C12.4171587,18.3639581 12.3896557,17.7313908 12.7628481,17.3242718 L17.6158645,12.0300721 L12.2928955,6.70710318 Z" fill="#000000" fill-rule="nonzero"></path>
                       <path d="M3.70710678,15.7071068 C3.31658249,16.0976311 2.68341751,16.0976311 2.29289322,15.7071068 C1.90236893,15.3165825 1.90236893,14.6834175 2.29289322,14.2928932 L8.29289322,8.29289322 C8.67147216,7.91431428 9.28105859,7.90106866 9.67572463,8.26284586 L15.6757246,13.7628459 C16.0828436,14.1360383 16.1103465,14.7686056 15.7371541,15.1757246 C15.3639617,15.5828436 14.7313944,15.6103465 14.3242754,15.2371541 L9.03007575,10.3841378 L3.70710678,15.7071068 Z" fill="#000000" fill-rule="nonzero" opacity="0.3" transform="translate(9.000003, 11.999999) rotate(-270.000000) translate(-9.000003, -11.999999) "></path>
                      </g>
                     </svg>
                    </span>
                   </div>
                  </div>
                  <div id="collapseOne8" class="collapse show" data-parent="#accordionExample8">
                   <div class="card-body">
                    ...
                   </div>
                  </div>
                 </div>
                 <div class="card">
                  <div class="card-header" id="headingTwo8">
                   <div class="card-title collapsed" data-toggle="collapse" data-target="#collapseTwo8">
                    <div class="card-label">Order Statistics</div>
                    <span class="svg-icon">
                     <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                      <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                       <polygon points="0 0 24 0 24 24 0 24"></polygon>
                       <path d="M12.2928955,6.70710318 C11.9023712,6.31657888 11.9023712,5.68341391 12.2928955,5.29288961 C12.6834198,4.90236532 13.3165848,4.90236532 13.7071091,5.29288961 L19.7071091,11.2928896 C20.085688,11.6714686 20.0989336,12.281055 19.7371564,12.675721 L14.2371564,18.675721 C13.863964,19.08284 13.2313966,19.1103429 12.8242777,18.7371505 C12.4171587,18.3639581 12.3896557,17.7313908 12.7628481,17.3242718 L17.6158645,12.0300721 L12.2928955,6.70710318 Z" fill="#000000" fill-rule="nonzero"></path>
                       <path d="M3.70710678,15.7071068 C3.31658249,16.0976311 2.68341751,16.0976311 2.29289322,15.7071068 C1.90236893,15.3165825 1.90236893,14.6834175 2.29289322,14.2928932 L8.29289322,8.29289322 C8.67147216,7.91431428 9.28105859,7.90106866 9.67572463,8.26284586 L15.6757246,13.7628459 C16.0828436,14.1360383 16.1103465,14.7686056 15.7371541,15.1757246 C15.3639617,15.5828436 14.7313944,15.6103465 14.3242754,15.2371541 L9.03007575,10.3841378 L3.70710678,15.7071068 Z" fill="#000000" fill-rule="nonzero" opacity="0.3" transform="translate(9.000003, 11.999999) rotate(-270.000000) translate(-9.000003, -11.999999) "></path>
                      </g>
                     </svg>
                    </span>
                   </div>
                  </div>
                  <div id="collapseTwo8" class="collapse" data-parent="#accordionExample8">
                   <div class="card-body">
                    ...
                   </div>
                  </div>
                 </div>
                 <div class="card">
                  <div class="card-header" id="headingThree8">
                   <div class="card-title collapsed" data-toggle="collapse" data-target="#collapseThree8">
                    <div class="card-label">eCommerce Reports</div>
                    <span class="svg-icon">
                     <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                      <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                       <polygon points="0 0 24 0 24 24 0 24"></polygon>
                       <path d="M12.2928955,6.70710318 C11.9023712,6.31657888 11.9023712,5.68341391 12.2928955,5.29288961 C12.6834198,4.90236532 13.3165848,4.90236532 13.7071091,5.29288961 L19.7071091,11.2928896 C20.085688,11.6714686 20.0989336,12.281055 19.7371564,12.675721 L14.2371564,18.675721 C13.863964,19.08284 13.2313966,19.1103429 12.8242777,18.7371505 C12.4171587,18.3639581 12.3896557,17.7313908 12.7628481,17.3242718 L17.6158645,12.0300721 L12.2928955,6.70710318 Z" fill="#000000" fill-rule="nonzero"></path>
                       <path d="M3.70710678,15.7071068 C3.31658249,16.0976311 2.68341751,16.0976311 2.29289322,15.7071068 C1.90236893,15.3165825 1.90236893,14.6834175 2.29289322,14.2928932 L8.29289322,8.29289322 C8.67147216,7.91431428 9.28105859,7.90106866 9.67572463,8.26284586 L15.6757246,13.7628459 C16.0828436,14.1360383 16.1103465,14.7686056 15.7371541,15.1757246 C15.3639617,15.5828436 14.7313944,15.6103465 14.3242754,15.2371541 L9.03007575,10.3841378 L3.70710678,15.7071068 Z" fill="#000000" fill-rule="nonzero" opacity="0.3" transform="translate(9.000003, 11.999999) rotate(-270.000000) translate(-9.000003, -11.999999) "></path>
                      </g>
                     </svg>
                    </span>
                   </div>
                  </div>
                  <div id="collapseThree8" class="collapse" data-parent="#accordionExample8">
                   <div class="card-body">
                    ...
                   </div>
                  </div>
                 </div>
                </div>