Component

Accordion

Expand and collapse content with ease.

Installation

npx lomer-ui add accordion

Or copy-paste the

Usage

import Accordion from '$lib/components/ui/accordion.svelte'
<Accordion title="Title">Content</Accordion>

Preview

Examples

Multiple

Just stack them, easy.

<Accordion title="Title 1">Content</Accordion>
<Accordion title="Title 2">Content</Accordion>
<Accordion title="Title 3">Content</Accordion>

Preview

Only one stays open

Simply bind the value property, and add unique name to your accordion.

let value = $state('')
<Accordion title="Title 1" name="accordion-one" bind:value>Content</Accordion>
<Accordion title="Title 2" name="accordion-two" bind:value>Content</Accordion>
<Accordion title="Title 3" name="accordion-three" bind:value>Content</Accordion>

Preview

Loading

Add isLoading property.

<Accordion title="Title here..." isLoading>	
Content
</Accordion>

Preview

Disabled

Add isDisabled property.

<Accordion title="Title here..." isDisabled>	
Content
</Accordion>

Preview