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

Accordion.Root

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`	`string \| undefined`	The active accordion item value. `Default: undefined`
`onValueChange`	`(value: string \| undefined) => void`	A callback function called when the active accordion item value changes. `Default: undefined`
`value`	`string \| undefined`	The active accordion item value when `multiple` is true. `Default: undefined`
`onValueChange`	`(value: string[]) => void`	A callback function called when the active accordion item value changes when `multiple` is true. `Default: undefined`

Data Attribute	Value/Description
`data-orientation`	The orientation of the accordion. `Value: 'horizontal' \| 'vertical'`
`data-melt-accordion`	Present on the root element. `Value: ''`

Accordion.Item

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	Value/Description
`data-state`	The state of the accordion item. `Value: 'open' \| 'closed'`
`data-disabled`	Present when the accordion item is disabled. `Value: ''`

Accordion.Trigger

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	Value/Description
`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: ''`

Accordion.Content

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	Value/Description
`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: ''`