Accordion - Skeleton

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sit esse nisi eligendi fuga! Quas nisi repellat adipisci animi repellendus incidunt laborum sunt qui nesciunt, ducimus saepe sapiente sed ut labore. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sit esse nisi eligendi fuga! Quas nisi repellat adipisci animi repellendus incidunt laborum sunt qui nesciunt, ducimus saepe sapiente sed ut labore.

<script lang="ts">
  import { Accordion } from '@skeletonlabs/skeleton-svelte/composed';

  import IconClub from '@lucide/svelte/icons/club';
  import IconDiamond from '@lucide/svelte/icons/diamond';
  import IconHeart from '@lucide/svelte/icons/heart';
  import IconSpade from '@lucide/svelte/icons/spade';

  let value = $state(['item-1']);
  const lorem =
    'Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sit esse nisi eligendi fuga! Quas nisi repellat adipisci animi repellendus incidunt laborum sunt qui nesciunt, ducimus saepe sapiente sed ut labore. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sit esse nisi eligendi fuga! Quas nisi repellat adipisci animi repellendus incidunt laborum sunt qui nesciunt, ducimus saepe sapiente sed ut labore.';
</script>

<Accordion {value} onValueChange={(e) => (value = e.value)}>
  <Accordion.Item value="item-1">
    <Accordion.Heading>
      <Accordion.Trigger class="grid-cols-[auto_1fr_auto]">
        <IconClub />
        <span>Club</span>
        <Accordion.Indicator>{value.includes('item-1') ? '-' : '+'}</Accordion.Indicator>
      </Accordion.Trigger>
    </Accordion.Heading>
    <Accordion.Content>{lorem}</Accordion.Content>
  </Accordion.Item>
  <hr class="hr" />
  <Accordion.Item value="item-2">
    <Accordion.Heading>
      <Accordion.Trigger class="grid-cols-[auto_1fr_auto]">
        <IconDiamond />
        <span>Diamond</span>
        <Accordion.Indicator>{value.includes('item-2') ? '-' : '+'}</Accordion.Indicator>
      </Accordion.Trigger>
    </Accordion.Heading>
    <Accordion.Content>{lorem}</Accordion.Content>
  </Accordion.Item>
  <hr class="hr" />
  <Accordion.Item value="item-3">
    <Accordion.Heading>
      <Accordion.Trigger class="grid-cols-[auto_1fr_auto]">
        <IconHeart />
        <span>Heart</span>
        <Accordion.Indicator>{value.includes('item-3') ? '-' : '+'}</Accordion.Indicator>
      </Accordion.Trigger>
    </Accordion.Heading>
    <Accordion.Content>{lorem}</Accordion.Content>
  </Accordion.Item>
  <hr class="hr" />
  <Accordion.Item value="item-4">
    <Accordion.Heading>
      <Accordion.Trigger class="grid-cols-[auto_1fr_auto]">
        <IconSpade />
        <span>Spade</span>
        <Accordion.Indicator>{value.includes('item-4') ? '-' : '+'}</Accordion.Indicator>
      </Accordion.Trigger>
    </Accordion.Heading>
    <Accordion.Content>{lorem}</Accordion.Content>
  </Accordion.Item>
</Accordion>

State

Note that value and onValueChanged are optional on the root component.

<script lang="ts">
  import { Accordion } from '@skeletonlabs/skeleton-svelte/composed';
</script>

<Accordion>
  <Accordion.Item value="item-1">
    <Accordion.Heading>
      <Accordion.Trigger>Item 1</Accordion.Trigger>
      <Accordion.Content>Content for Item 1</Accordion.Content>
    </Accordion.Heading>
  </Accordion.Item>
  <hr class="hr" />
  <Accordion.Item value="item-2">
    <Accordion.Heading>
      <Accordion.Trigger>Item 2</Accordion.Trigger>
      <Accordion.Content>Content for Item 2</Accordion.Content>
    </Accordion.Heading>
  </Accordion.Item>
  <hr class="hr" />
  <Accordion.Item value="item-3">
    <Accordion.Heading>
      <Accordion.Trigger>Item 3</Accordion.Trigger>
      <Accordion.Content>Content for Item 3</Accordion.Content>
    </Accordion.Heading>
  </Accordion.Item>
</Accordion>

Collapsible

By default you can’t close open items. Adding collapsible changes this behavior.

<script lang="ts">
  import { Accordion } from '@skeletonlabs/skeleton-svelte/composed';
</script>

<Accordion collapsible>
  <Accordion.Item value="item-1">
    <Accordion.Heading>
      <Accordion.Trigger>Item 1</Accordion.Trigger>
      <Accordion.Content>Content for Item 1</Accordion.Content>
    </Accordion.Heading>
  </Accordion.Item>
  <hr class="hr" />
  <Accordion.Item value="item-2">
    <Accordion.Heading>
      <Accordion.Trigger>Item 2</Accordion.Trigger>
      <Accordion.Content>Content for Item 2</Accordion.Content>
    </Accordion.Heading>
  </Accordion.Item>
  <hr class="hr" />
  <Accordion.Item value="item-3">
    <Accordion.Heading>
      <Accordion.Trigger>Item 3</Accordion.Trigger>
      <Accordion.Content>Content for Item 3</Accordion.Content>
    </Accordion.Heading>
  </Accordion.Item>
</Accordion>

Multiple

Adding multiple allows items to open independently.

<script lang="ts">
  import { Accordion } from '@skeletonlabs/skeleton-svelte/composed';
</script>

<Accordion multiple>
  <Accordion.Item value="item-1">
    <Accordion.Heading>
      <Accordion.Trigger>Item 1</Accordion.Trigger>
      <Accordion.Content>Content for Item 1</Accordion.Content>
    </Accordion.Heading>
  </Accordion.Item>
  <hr class="hr" />
  <Accordion.Item value="item-2">
    <Accordion.Heading>
      <Accordion.Trigger>Item 2</Accordion.Trigger>
      <Accordion.Content>Content for Item 2</Accordion.Content>
    </Accordion.Heading>
  </Accordion.Item>
  <hr class="hr" />
  <Accordion.Item value="item-3">
    <Accordion.Heading>
      <Accordion.Trigger>Item 3</Accordion.Trigger>
      <Accordion.Content>Content for Item 3</Accordion.Content>
    </Accordion.Heading>
  </Accordion.Item>
</Accordion>

Grid Columns

Use Grid Columns to adjust the layout of the Trigger component.

<script lang="ts">
  import { Accordion } from '@skeletonlabs/skeleton-svelte/composed';

  import IconClub from '@lucide/svelte/icons/club';
  import IconDiamond from '@lucide/svelte/icons/diamond';
  import IconHeart from '@lucide/svelte/icons/heart';
  import IconSpade from '@lucide/svelte/icons/spade';
</script>

<Accordion>
  <Accordion.Item value="club">
    <Accordion.Heading>
      <Accordion.Trigger class="grid-cols-[1fr_auto]">
        <span>Club</span>
        <IconClub />
      </Accordion.Trigger>
      <Accordion.Content>Content for Item 1</Accordion.Content>
    </Accordion.Heading>
  </Accordion.Item>
  <hr class="hr" />
  <Accordion.Item value="diamond">
    <Accordion.Heading>
      <Accordion.Trigger class="grid-cols-[1fr_auto]">
        <span>Diamond</span>
        <IconDiamond />
      </Accordion.Trigger>
      <Accordion.Content>Content for Item 2</Accordion.Content>
    </Accordion.Heading>
  </Accordion.Item>
  <hr class="hr" />
  <Accordion.Item value="heart">
    <Accordion.Heading>
      <Accordion.Trigger class="grid-cols-[1fr_auto]">
        <span>Heart</span>
        <IconHeart />
      </Accordion.Trigger>
      <Accordion.Content>Content for Item 3</Accordion.Content>
    </Accordion.Heading>
  </Accordion.Item>
  <hr class="hr" />
  <Accordion.Item value="spade">
    <Accordion.Heading>
      <Accordion.Trigger class="grid-cols-[1fr_auto]">
        <span>Spade</span>
        <IconSpade />
      </Accordion.Trigger>
      <Accordion.Content>Content for Item 4</Accordion.Content>
    </Accordion.Heading>
  </Accordion.Item>
</Accordion>

Club -

Diamond +

Heart +

Spade +

State

Item 1 Content for Item 1

Item 2 Content for Item 2

Item 3 Content for Item 3

Collapsible

Item 1 Content for Item 1

Item 2 Content for Item 2

Item 3 Content for Item 3

Multiple

Item 1 Content for Item 1

Item 2 Content for Item 2

Item 3 Content for Item 3

Grid Columns

Club Content for Item 1

Diamond Content for Item 2

Heart Content for Item 3

Spade Content for Item 4