Accordion
Sections that open one at a time, or together
One open at a time
Opening one closes the others.
Vitreo is an admin template with dashboards, apps and hundreds of pages in four stacks.
Vitreo is an admin template with dashboards, apps and hundreds of pages in four stacks.
Vitreo is an admin template with dashboards, apps and hundreds of pages in four stacks.
Code
<div class="accordion" id="acc-1">
<div class="accordion-item">
<h3 class="accordion-header"><button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#acc-1-0" aria-expanded="true" aria-controls="acc-1-0">What is Vitreo?</button></h3>
<div id="acc-1-0" class="accordion-collapse collapse show" data-bs-parent="#acc-1">
<div class="accordion-body">
<p class="m-0 text-label-2">Vitreo is an admin template with dashboards, apps and hundreds of pages in four stacks.</p>
</div>
</div>
</div>
<div class="accordion-item">
<h3 class="accordion-header"><button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#acc-1-1" aria-expanded="false" aria-controls="acc-1-1">Can I use it for clients?</button></h3>
<div id="acc-1-1" class="accordion-collapse collapse" data-bs-parent="#acc-1">
<div class="accordion-body">
<p class="m-0 text-label-2">Vitreo is an admin template with dashboards, apps and hundreds of pages in four stacks.</p>
</div>
</div>
</div>
<div class="accordion-item">
<h3 class="accordion-header"><button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#acc-1-2" aria-expanded="false" aria-controls="acc-1-2">Do I get updates?</button></h3>
<div id="acc-1-2" class="accordion-collapse collapse" data-bs-parent="#acc-1">
<div class="accordion-body">
<p class="m-0 text-label-2">Vitreo is an admin template with dashboards, apps and hundreds of pages in four stacks.</p>
</div>
</div>
</div>
</div>Several open
Each section opens on its own.
Shipping details go here, in a sentence or two.
Returns details go here, in a sentence or two.
Warranty details go here, in a sentence or two.
Code
<div class="accordion" id="acc-2">
<div class="accordion-item">
<h3 class="accordion-header"><button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#acc-2-0" aria-expanded="true" aria-controls="acc-2-0">Shipping</button></h3>
<div id="acc-2-0" class="accordion-collapse collapse show">
<div class="accordion-body">
<p class="m-0 text-label-2">Shipping details go here, in a sentence or two.</p>
</div>
</div>
</div>
<div class="accordion-item">
<h3 class="accordion-header"><button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#acc-2-1" aria-expanded="true" aria-controls="acc-2-1">Returns</button></h3>
<div id="acc-2-1" class="accordion-collapse collapse show">
<div class="accordion-body">
<p class="m-0 text-label-2">Returns details go here, in a sentence or two.</p>
</div>
</div>
</div>
<div class="accordion-item">
<h3 class="accordion-header"><button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#acc-2-2" aria-expanded="false" aria-controls="acc-2-2">Warranty</button></h3>
<div id="acc-2-2" class="accordion-collapse collapse">
<div class="accordion-body">
<p class="m-0 text-label-2">Warranty details go here, in a sentence or two.</p>
</div>
</div>
</div>
</div>Flush
Without the outer frame, for use inside cards.
Settings for account.
Settings for billing.
Settings for security.
Code
<div class="accordion accordion-flush" id="acc-3">
<div class="accordion-item">
<h3 class="accordion-header"><button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#acc-3-0" aria-expanded="false" aria-controls="acc-3-0">Account</button></h3>
<div id="acc-3-0" class="accordion-collapse collapse" data-bs-parent="#acc-3">
<div class="accordion-body">
<p class="m-0 text-label-2">Settings for account.</p>
</div>
</div>
</div>
<div class="accordion-item">
<h3 class="accordion-header"><button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#acc-3-1" aria-expanded="false" aria-controls="acc-3-1">Billing</button></h3>
<div id="acc-3-1" class="accordion-collapse collapse" data-bs-parent="#acc-3">
<div class="accordion-body">
<p class="m-0 text-label-2">Settings for billing.</p>
</div>
</div>
</div>
<div class="accordion-item">
<h3 class="accordion-header"><button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#acc-3-2" aria-expanded="false" aria-controls="acc-3-2">Security</button></h3>
<div id="acc-3-2" class="accordion-collapse collapse" data-bs-parent="#acc-3">
<div class="accordion-body">
<p class="m-0 text-label-2">Settings for security.</p>
</div>
</div>
</div>
</div>