Accorditon
Build vertically collapsing accordions in combination with our Collapse JavaScript plugin.
Style 1
Getting started is simple! Download the app from the App Store or Google Play Store, create an account using your email or social media login, and start making video calls instantly.
Getting started is simple! Download the app from the App Store or Google Play Store, create an account using your email or social media login, and start making video calls instantly.
<div class="accordion">
<div class="px-0 card p-3 border-0 border-bottom bg-transparent rounded-0">
<div class="px-0 card-header border-0 bg-gradient-1">
<a class="collapsed text-900 fw-bold d-flex align-items-center" data-bs-toggle="collapse" href="#collapse1">
<span class="icon-shape icon-xs fs-7 rounded-circle d-none d-md-block me-3 bg-primary text-white">1</span>
<h6 class="m-0">Digital product engineering</h6>
<span class="ms-auto arrow me-2">
<svg xmlns="http://www.w3.org/2000/svg" width="13" height="8" viewBox="0 0 13 8" fill="none">
<path class="stroke-dark" d="M11.5 1L6.25 6.5L1 1" stroke="#111827" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</span>
</a>
</div>
<div id="collapse1" class="collapse show" data-bs-parent=".accordion">
<p class="px-0 card-body fs-6 text-600">Getting started is simple! Download the app from the App Store or Google Play Store, create an account using your email or social media login, and start making video calls instantly.</p>
</div>
</div>
<div class="px-0 card p-3 border-0 border-bottom bg-transparent rounded-0">
<div class="px-0 card-header border-0 bg-gradient-1">
<a class="text-900 fw-bold d-flex align-items-center" data-bs-toggle="collapse" href="#collapse2">
<span class="icon-shape icon-xs fs-7 rounded-circle d-none d-md-block me-3 bg-primary text-white">2</span>
<h6 class="m-0">Crafting SaaS development</h6>
<span class="ms-auto arrow me-2">
<svg xmlns="http://www.w3.org/2000/svg" width="13" height="8" viewBox="0 0 13 8" fill="none">
<path class="stroke-dark" d="M11.5 1L6.25 6.5L1 1" stroke="#111827" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</span>
</a>
</div>
<div id="collapse2" class="collapse" data-bs-parent=".accordion">
<p class="px-0 card-body fs-6 text-600">Getting started is simple! Download the app from the App Store or Google Play Store, create an account using your email or social media login, and start making video calls instantly.</p>
</div>
</div>
</div>
Style 2
We start with a comprehensive analysis of your current brand and online presence, followed by a tailored strategy to improve your brand identity, optimize your website for search engines, and create a cohesive branding plan.
We start with a comprehensive analysis of your current brand and online presence, followed by a tailored strategy to improve your brand identity, optimize your website for search engines, and create a cohesive branding plan.
<div class="accordion">
<div class="mb-3 card p-3 border bg-white rounded-3">
<div class="px-0 card-header border-0 bg-gradient-1">
<a class="collapsed text-900 fw-bold d-flex align-items-center" data-bs-toggle="collapse" href="#collapseOne">
<h6 class="m-0">What are the key benefits of using <span class="text-primary">Infinia System</span></h6>
<span class="ms-auto arrow me-2">
<svg xmlns="http://www.w3.org/2000/svg" width="13" height="8" viewBox="0 0 13 8" fill="none">
<path class="stroke-dark" d="M11.5 1L6.25 6.5L1 1" stroke="#111827" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</span>
</a>
</div>
<div id="collapseOne" class="collapse show" data-bs-parent=".accordion">
<p class="ps-0 card-body">We start with a comprehensive analysis of your current brand and online presence, followed by a tailored strategy to improve your brand identity, optimize your website for search engines, and create a cohesive branding plan.</p>
</div>
</div>
<div class="mb-3 card p-3 border bg-white rounded-3">
<div class="px-0 card-header border-0 bg-gradient-1">
<a class="collapsed text-900 fw-bold d-flex align-items-center" data-bs-toggle="collapse" href="#collapseTwo">
<h6 class="m-0">What features does <span class="text-primary">Infinia</span> offer?</h6>
<span class="ms-auto arrow me-2">
<svg xmlns="http://www.w3.org/2000/svg" width="13" height="8" viewBox="0 0 13 8" fill="none">
<path class="stroke-dark" d="M11.5 1L6.25 6.5L1 1" stroke="#111827" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</span>
</a>
</div>
<div id="collapseTwo" class="collapse" data-bs-parent=".accordion">
<p class="ps-0 card-body">We start with a comprehensive analysis of your current brand and online presence, followed by a tailored strategy to improve your brand identity, optimize your website for search engines, and create a cohesive branding plan.</p>
</div>
</div>
</div>