بوت استرپ برای ارائه اجزای منحصر به فرد آکاردئونی که مطابق با استانداردهای طراحی مترونیک است.
<div class="accordion accordion-toggle-arrow" id="accordionنمونه1">
<div class="card">
<div class="card-header">
<div class="card-title" data-toggle="collapse" data-target="#collapseیک1">
آخرین سفارشات
</div>
</div>
<div id="collapseیک1" class="collapse show" data-parent="#accordionنمونه1">
<div class="card-body">
...
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<div class="card-title collapsed" data-toggle="collapse" data-target="#collapseدو1">
آپدیت محصولات
</div>
</div>
<div id="collapseدو1" class="collapse" data-parent="#accordionنمونه1">
<div class="card-body">
...
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<div class="card-title collapsed" data-toggle="collapse" data-target="#collapseسه1">
...
</div>
</div>
<div id="collapseسه1" class="collapse" data-parent="#accordionنمونه1">
<div class="card-body">
...
</div>
</div>
</div>
</div>
<div class="accordion accordion-light accordion-toggle-arrow" id="accordionنمونه2">
<div class="card">
<div class="card-header" id="headingیک2">
<div class="card-title" data-toggle="collapse" data-target="#collapseیک2">
آخرین گزارشات
</div>
</div>
<div id="collapseیک2" class="collapse show" data-parent="#accordionنمونه2">
<div class="card-body">
...
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingدو2">
<div class="card-title collapsed" data-toggle="collapse" data-target="#collapseدو2">
حسابداری
</div>
</div>
<div id="collapseدو2" class="collapse" data-parent="#accordionنمونه2">
<div class="card-body">
...
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingسه2">
<div class="card-title collapsed" data-toggle="collapse" data-target="#collapseسه2">
آخرین دستمزدها
</div>
</div>
<div id="collapseسه2" class="collapse" data-parent="#accordionنمونه2">
<div class="card-body">
...
</div>
</div>
</div>
</div>
<div class="accordion accordion-solid accordion-toggle-plus" id="accordionنمونه3">
<div class="card">
<div class="card-header" id="headingیک3">
<div class="card-title" data-toggle="collapse" data-target="#collapseیک3">
آخرین گزارشات
</div>
</div>
<div id="collapseیک3" class="collapse show" data-parent="#accordionنمونه3">
<div class="card-body">
...
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingدو3">
<div class="card-title collapsed" data-toggle="collapse" data-target="#collapseدو3">
حسابداری
</div>
</div>
<div id="collapseدو3" class="collapse" data-parent="#accordionنمونه3">
<div class="card-body">
...
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingسه3">
<div class="card-title collapsed" data-toggle="collapse" data-target="#collapseسه3">
آخرین دستمزدها
</div>
</div>
<div id="collapseسه3" class="collapse" data-parent="#accordionنمونه3">
<div class="card-body">
...
</div>
</div>
</div>
</div>
<div class="accordion accordion-light accordion-light-borderless accordion-svg-toggle" id="accordionExample">
<div class="card">
<div class="card-header" id="headingیک7">
<div class="card-title" data-toggle="collapse" data-target="#collapseیک7">
<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">موجودی محصول</div>
</div>
</div>
<div id="collapseیک7" class="collapse show" data-parent="#accordionExample">
<div class="card-body pl-12">
...
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingدو7">
<div class="card-title collapsed" data-toggle="collapse" data-target="#collapseدو7">
<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">آمار</div>
</div>
</div>
<div id="collapseدو7" class="collapse" data-parent="#accordionExample">
<div class="card-body pl-12">
...
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingسه7">
<div class="card-title collapsed" data-toggle="collapse" data-target="#collapseسه7">
<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">تجارت الکترونیک گزارشات</div>
</div>
</div>
<div id="collapseسه7" class="collapse" data-parent="#accordionExample">
<div class="card-body pl-12">
...
</div>
</div>
</div>
</div>
<div class="accordion accordion-toggle-arrow" id="accordionنمونه4">
<div class="card">
<div class="card-header" id="headingیک4">
<div class="card-title" data-toggle="collapse" data-target="#collapseیک4">
<i class="flaticon2-layers-1"></i> دسترسی کاربران
</div>
</div>
<div id="collapseیک4" class="collapse show" data-parent="#accordionنمونه4">
<div class="card-body">
...
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingدو4">
<div class="card-title collapsed" data-toggle="collapse" data-target="#collapseدو4">
<i class="flaticon2-copy"></i> تنظیمات اکانت
</div>
</div>
<div id="collapseدو4" class="collapse" data-parent="#accordionنمونه4">
<div class="card-body">
...
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingسه4">
<div class="card-title collapsed" data-toggle="collapse" data-target="#collapseسه4">
<i class="flaticon2-bell-alarm-symbol"></i> اپلیکیشن گزینه ها
</div>
</div>
<div id="collapseسه4" class="collapse" data-parent="#accordionنمونه4">
<div class="card-body">
...
</div>
</div>
</div>
</div>
<div class="accordion accordion-light accordion-toggle-arrow" id="accordionنمونه5">
<div class="card">
<div class="card-header" id="headingیک5">
<div class="card-title" data-toggle="collapse" data-target="#collapseیک5">
<i class="flaticon-pie-chart-1"></i> موجودی محصول
</div>
</div>
<div id="collapseیک5" class="collapse show" data-parent="#accordionنمونه5">
<div class="card-body">
...
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingدو5">
<div class="card-title collapsed" data-toggle="collapse" data-target="#collapseدو5">
<i class="flaticon2-notification"></i> آمار
</div>
</div>
<div id="collapseدو5" class="collapse" data-parent="#accordionنمونه5">
<div class="card-body">
...
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingسه5">
<div class="card-title collapsed" data-toggle="collapse" data-target="#collapseسه5">
<i class="flaticon2-chart"></i> تجارت الکترونیک گزارشات
</div>
</div>
<div id="collapseسه5" class="collapse" data-parent="#accordionنمونه5">
<div class="card-body">
...
</div>
</div>
</div>
</div>
<div class="accordion accordion-solid accordion-toggle-plus" id="accordionنمونه6">
<div class="card">
<div class="card-header" id="headingیک6">
<div class="card-title" data-toggle="collapse" data-target="#collapseیک6">
<i class="flaticon-pie-chart-1"></i> موجودی محصول
</div>
</div>
<div id="collapseیک6" class="collapse show" data-parent="#accordionنمونه6">
<div class="card-body">
...
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingدو6">
<div class="card-title collapsed" data-toggle="collapse" data-target="#collapseدو6">
<i class="flaticon2-notification"></i> آمار
</div>
</div>
<div id="collapseدو6" class="collapse" data-parent="#accordionنمونه6">
<div class="card-body">
...
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingسه6">
<div class="card-title collapsed" data-toggle="collapse" data-target="#collapseسه6">
<i class="flaticon2-chart"></i> تجارت الکترونیک گزارشات
</div>
</div>
<div id="collapseسه6" class="collapse" data-parent="#accordionنمونه6">
<div class="card-body">
...
</div>
</div>
</div>
</div>
<div class="accordion accordion-solid accordion-panel accordion-svg-toggle" id="accordionنمونه8">
<div class="card">
<div class="card-header" id="headingیک8">
<div class="card-title" data-toggle="collapse" data-target="#collapseیک8">
<div class="card-label">موجودی محصول</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="collapseیک8" class="collapse show" data-parent="#accordionنمونه8">
<div class="card-body">
...
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingدو8">
<div class="card-title collapsed" data-toggle="collapse" data-target="#collapseدو8">
<div class="card-label">آمار</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="collapseدو8" class="collapse" data-parent="#accordionنمونه8">
<div class="card-body">
...
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingسه8">
<div class="card-title collapsed" data-toggle="collapse" data-target="#collapseسه8">
<div class="card-label">تجارت الکترونیک گزارشات</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="collapseسه8" class="collapse" data-parent="#accordionنمونه8">
<div class="card-body">
...
</div>
</div>
</div>
</div>
