Accordion

Create collapsible accordions using <details> and <summary> tags.

Example

<div class="accordion">
    <details class="accordion-item">
        <summary class="accordion-header">Accordion option 1</summary>
        <div class="accordion-body">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis dolor arcu, tempus id accumsan vel, semper et est. Fusce egestas urna vel mauris blandit, vel aliquet purus elementum. Integer congue vehicula tellus, vitae eleifend dui tincidunt nec. Suspendisse turpis diam, iaculis sed ligula at, venenatis placerat mi. Aenean iaculis justo.</p>
        </div>
    </details>
    <details class="accordion-item">
        <summary class="accordion-header">Accordion option 2</summary>
        <div class="accordion-body">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis dolor arcu, tempus id accumsan vel, semper et est. Fusce egestas urna vel mauris blandit, vel aliquet purus elementum. Integer congue vehicula tellus, vitae eleifend dui tincidunt nec. Suspendisse turpis diam, iaculis sed ligula at, venenatis placerat mi. Aenean iaculis justo.</p>
        </div>
    </details>
    <details class="accordion-item">
        <summary class="accordion-header">Accordion option 3</summary>
        <div class="accordion-body">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis dolor arcu, tempus id accumsan vel, semper et est. Fusce egestas urna vel mauris blandit, vel aliquet purus elementum. Integer congue vehicula tellus, vitae eleifend dui tincidunt nec. Suspendisse turpis diam, iaculis sed ligula at, venenatis placerat mi. Aenean iaculis justo.</p>
        </div>
    </details>
</div>

Variants

Use .accordion-<theme> on each accordion item to color these.

<details class="accordion-item accordion-progressive">
  <!-- Accordion content here -->
</details>
<details class="accordion-item accordion-destructive">
  <!-- Accordion content here -->
</details>
<details class="accordion-item accordion-error">
  <!-- Accordion content here -->
</details>
<details class="accordion-item accordion-warning">
  <!-- Accordion content here -->
</details>
<details class="accordion-item accordion-success">
  <!-- Accordion content here -->
</details>
<details class="accordion-item accordion-notice">
  <!-- Accordion content here -->
</details>