Accordion
Sections that open one at a time, or together
One open at a time
Opening one closes the others.
What is Vitreo?
Vitreo is an admin template with dashboards, apps and hundreds of pages in four stacks.
Can I use it for clients?
Vitreo is an admin template with dashboards, apps and hundreds of pages in four stacks.
Do I get updates?
Vitreo is an admin template with dashboards, apps and hundreds of pages in four stacks.
Code
<div class="accordion" data-accordion-single>
<details open>
<summary>What is Vitreo?<svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg></summary>
<div class="acc-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>
</details>
<details>
<summary>Can I use it for clients?<svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg></summary>
<div class="acc-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>
</details>
<details>
<summary>Do I get updates?<svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg></summary>
<div class="acc-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>
</details>
</div>Several open
Each section opens on its own.
Shipping
Shipping details go here, in a sentence or two.
Returns
Returns details go here, in a sentence or two.
Warranty
Warranty details go here, in a sentence or two.
Code
<div class="accordion">
<details open>
<summary>Shipping<svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg></summary>
<div class="acc-body">
<p class="m-0 text-label-2">Shipping details go here, in a sentence or two.</p>
</div>
</details>
<details open>
<summary>Returns<svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg></summary>
<div class="acc-body">
<p class="m-0 text-label-2">Returns details go here, in a sentence or two.</p>
</div>
</details>
<details>
<summary>Warranty<svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg></summary>
<div class="acc-body">
<p class="m-0 text-label-2">Warranty details go here, in a sentence or two.</p>
</div>
</details>
</div>Flush
Without the outer frame, for use inside cards.
Account
Settings for account.
Billing
Settings for billing.
Security
Settings for security.
Code
<div class="accordion accordion-flush" data-accordion-single>
<details>
<summary>Account<svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg></summary>
<div class="acc-body">
<p class="m-0 text-label-2">Settings for account.</p>
</div>
</details>
<details>
<summary>Billing<svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg></summary>
<div class="acc-body">
<p class="m-0 text-label-2">Settings for billing.</p>
</div>
</details>
<details>
<summary>Security<svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg></summary>
<div class="acc-body">
<p class="m-0 text-label-2">Settings for security.</p>
</div>
</details>
</div>