Collapsible content sections using the native
<details> and
<summary> elements.
Card<link rel="stylesheet" href="https://esm.sh/@erikt/ui/accordion.css" />@erikt/ui is a minimal CSS design system that styles native HTML elements directly, with no utility classes or component wrappers.
<details>
<summary>What is @erikt/ui?</summary>
<div>
@erikt/ui is a minimal CSS design system that styles native HTML elements
directly.
</div>
</details>
Stack several <details> elements and they space
themselves.
@erikt/ui and start writing HTML.prefers-color-scheme automatically.
<details>
<summary>Getting started</summary>
<div>...</div>
</details>
<details>
<summary>Customization</summary>
<div>...</div>
</details>
<details>
<summary>Dark mode</summary>
<div>...</div>
</details>
Give a group the same name attribute and only one item
stays open at a time.
@erikt/ui and start writing HTML.prefers-color-scheme automatically.
<details name="faq">
<summary>Getting started</summary>
<div>...</div>
</details>
<details name="faq">
<summary>Customization</summary>
<div>...</div>
</details>
<details name="faq">
<summary>Dark mode</summary>
<div>...</div>
</details>Add the open attribute to expand an item on load.
open attribute to expand by default.<details open>
<summary>This one is open</summary>
<div>Use the open attribute to expand by default.</div>
</details>
Put the items inside a Card to group
them on their own surface.
@erikt/ui and start writing HTML.prefers-color-scheme automatically.
<article class="card secondary">
<details name="faq">
<summary>Getting started</summary>
<div>...</div>
</details>
<details name="faq">
<summary>Customization</summary>
<div>...</div>
</details>
<details name="faq">
<summary>Dark mode</summary>
<div>...</div>
</details>
</article>| Type | Classes / attributes | What it does |
|---|---|---|
| State | [open] |
Starts expanded |