Accordion
Organizes content into collapsible sections.
<script lang="ts">
import { Accordion } from "$lib";
import { CaretDown } from "phosphor-svelte";
import { slide } from "svelte/transition";
const items = [
{
title: "Feature Overview",
content:
"Our platform offers task management, team messaging, file sharing, progress tracking,and reporting for streamlined project management."
},
{
title: "Advantages of our Platform",
content:
"Experience improved productivity, enhanced communication, and customizable project views for successful project execution."
},
{
title: "Effective Implementation Strategies",
content:
"Define clear goals, provide comprehensive training, encourage adoption, and iterate based on feedback."
}
];
</script>
<Accordion.Root class="w-full sm:max-w-[70%]" multiple>
{#each items as item, i}
<Accordion.Item
value="${i}"
class="border-b border-dark-10 px-1.5 group"
>
<Accordion.Trigger
class="flex w-full flex-1 items-center justify-between py-5 text-[15px] font-medium [&[data-state=open]>span>svg]:rotate-180 transition-all "
>
{item.title}
<span
class="rounded-[7px] inline-flex items-center justify-center h-8 w-8 hover:bg-dark-10 bg-transparent transition-all"
>
<CaretDown
class="h-[18px] w-[18px] transition-all duration-200"
/>
</span>
</Accordion.Trigger>
<Accordion.Content
transition={slide}
transitionConfig={{ duration: 200 }}
class="text-sm pb-[25px]"
>
{item.content}
</Accordion.Content>
</Accordion.Item>
{/each}
</Accordion.Root>
<script lang="ts">
import { Accordion } from "$lib";
import { CaretDown } from "phosphor-svelte";
import { slide } from "svelte/transition";
const items = [
{
title: "Feature Overview",
content:
"Our platform offers task management, team messaging, file sharing, progress tracking,and reporting for streamlined project management."
},
{
title: "Advantages of our Platform",
content:
"Experience improved productivity, enhanced communication, and customizable project views for successful project execution."
},
{
title: "Effective Implementation Strategies",
content:
"Define clear goals, provide comprehensive training, encourage adoption, and iterate based on feedback."
}
];
</script>
<Accordion.Root class="w-full sm:max-w-[70%]" multiple>
{#each items as item, i}
<Accordion.Item
value="${i}"
class="border-b border-dark-10 px-1.5 group"
>
<Accordion.Trigger
class="flex w-full flex-1 items-center justify-between py-5 text-[15px] font-medium [&[data-state=open]>span>svg]:rotate-180 transition-all "
>
{item.title}
<span
class="rounded-[7px] inline-flex items-center justify-center h-8 w-8 hover:bg-dark-10 bg-transparent transition-all"
>
<CaretDown
class="h-[18px] w-[18px] transition-all duration-200"
/>
</span>
</Accordion.Trigger>
<Accordion.Content
transition={slide}
transitionConfig={{ duration: 200 }}
class="text-sm pb-[25px]"
>
{item.content}
</Accordion.Content>
</Accordion.Item>
{/each}
</Accordion.Root>
Structure
<script lang="ts">
import { Accordion } from "bits-ui";
</script>
<Accordion.Root>
<Accordion.Item>
<Accordion.Header>
<Accordion.Trigger />
</Accordion.Header>
<Accordion.Content />
</Accordion.Item>
</Accordion.Root>
<script lang="ts">
import { Accordion } from "bits-ui";
</script>
<Accordion.Root>
<Accordion.Item>
<Accordion.Header>
<Accordion.Trigger />
</Accordion.Header>
<Accordion.Content />
</Accordion.Item>
</Accordion.Root>
Component API
The root accordion component used to set and manage the state of the accordion.
| Property | Type | Description |
|---|---|---|
multiple | boolean | Whether or not multiple accordion items can be active at the same time. Default:
false |
disabled | boolean | Whether or not the accordion is disabled. Default:
false |
value | union | The active accordion item value. Default:
—— undefined |
onValueChange | function | A callback function called when the active accordion item value changes. Default:
—— undefined |
value | union | The active accordion item value when Default:
—— undefined |
onValueChange | function | A callback function called when the active accordion item value changes when Default:
—— undefined |
| Data Attribute | Description/Value |
|---|---|
data-orientation | The orientation of the accordion. Value: 'horizontal' | 'vertical' |
data-bits-accordion-root | Present on the root element. Value: '' |
An accordion item.
| Property | Type | Description |
|---|---|---|
asChild | boolean | Whether to use render delegation with this component or not. Default:
false |
value | string | The value of the accordion item. Default:
—— undefined |
disabled | boolean | Whether or not the accordion item is disabled. Default:
false |
| Data Attribute | Description/Value |
|---|---|
data-state | The state of the accordion item. Value: 'open' | 'closed' |
data-disabled | Present when the accordion item is disabled. Value: '' |
data-bits-accordion-item | Present on the item element. Value: '' |
The accordion item trigger, which opens and closes the accordion item.
| Property | Type | Description |
|---|---|---|
asChild | boolean | Whether to use render delegation with this component or not. Default:
false |
| Data Attribute | Description/Value |
|---|---|
data-state | The state of the accordion item. Value: 'open' | 'closed' |
data-disabled | Present when the accordion item is disabled. Value: '' |
data-value | The value of the accordion item. Value: '' |
data-bits-accordion-trigger | Present on the trigger element. Value: '' |
The accordion item content, which is displayed when the item is open.
| Property | Type | Description |
|---|---|---|
asChild | boolean | Whether to use render delegation with this component or not. Default:
false |
| Data Attribute | Description/Value |
|---|---|
data-state | The state of the accordion item. Value: 'open' | 'closed' |
data-disabled | Present when the accordion item is disabled. Value: '' |
data-value | The value of the accordion item. Value: '' |
data-bits-accordion-content | Present on the content element. Value: '' |