Accordion - Skeleton

'use client';

import { Accordion } from '@skeletonlabs/skeleton-react';
import { Club as IconClub, Diamond as IconDiamond, Heart as IconHeart, Spade as IconSpade } from 'lucide-react';

export default function () {
  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.';
  return (
    <Accordion>
      <Accordion.Item value="item-1">
        <Accordion.Heading>
          <Accordion.Trigger className="grid-cols-[auto_1fr_auto]">
            <IconClub />
            <span>Club</span>
            <Accordion.Indicator>
              <Accordion.Context>{(ctx) => (ctx.api.value.includes('item-1') ? '-' : '+')}</Accordion.Context>
            </Accordion.Indicator>
          </Accordion.Trigger>
          <Accordion.Content>{lorem}</Accordion.Content>
        </Accordion.Heading>
      </Accordion.Item>
      <hr className="hr" />
      <Accordion.Item value="item-2">
        <Accordion.Heading>
          <Accordion.Trigger className="grid-cols-[auto_1fr_auto]">
            <IconDiamond />
            <span>Diamond</span>
            <Accordion.Indicator>
              <Accordion.Context>{(ctx) => (ctx.api.value.includes('item-2') ? '-' : '+')}</Accordion.Context>
            </Accordion.Indicator>
          </Accordion.Trigger>
          <Accordion.Content>{lorem}</Accordion.Content>
        </Accordion.Heading>
      </Accordion.Item>
      <hr className="hr" />
      <Accordion.Item value="item-3">
        <Accordion.Heading>
          <Accordion.Trigger className="grid-cols-[auto_1fr_auto]">
            <IconHeart />
            <span>Heart</span>
            <Accordion.Indicator>
              <Accordion.Context>{(ctx) => (ctx.api.value.includes('item-3') ? '-' : '+')}</Accordion.Context>
            </Accordion.Indicator>
          </Accordion.Trigger>
          <Accordion.Content>{lorem}</Accordion.Content>
        </Accordion.Heading>
      </Accordion.Item>
      <hr className="hr" />
      <Accordion.Item value="item-4">
        <Accordion.Heading>
          <Accordion.Trigger className="grid-cols-[auto_1fr_auto]">
            <IconSpade />
            <span>Spade</span>
            <Accordion.Indicator>
              <Accordion.Context>{(ctx) => (ctx.api.value.includes('item-4') ? '-' : '+')}</Accordion.Context>
            </Accordion.Indicator>
          </Accordion.Trigger>
          <Accordion.Content>{lorem}</Accordion.Content>
        </Accordion.Heading>
      </Accordion.Item>
    </Accordion>
  );
}

State

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

'use client';

import { Accordion } from '@skeletonlabs/skeleton-react';

export default function () {
  return (
    <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 className="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 className="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.

'use client';

import { Accordion } from '@skeletonlabs/skeleton-react';
import { Club as IconClub, Diamond as IconDiamond, Heart as IconHeart, Spade as IconSpade } from 'lucide-react';

export default function () {
  return (
    <Accordion>
      <Accordion.Item value="item-1">
        <Accordion.Heading>
          <Accordion.Trigger className="grid-cols-[1fr_auto]">
            <span>Club</span>
            <IconClub />
          </Accordion.Trigger>
          <Accordion.Content>Content for Item 1</Accordion.Content>
        </Accordion.Heading>
      </Accordion.Item>
      <hr className="hr" />
      <Accordion.Item value="item-2">
        <Accordion.Heading>
          <Accordion.Trigger className="grid-cols-[1fr_auto]">
            <span>Diamond</span>
            <IconDiamond />
          </Accordion.Trigger>
          <Accordion.Content>Content for Item 2</Accordion.Content>
        </Accordion.Heading>
      </Accordion.Item>
      <hr className="hr" />
      <Accordion.Item value="item-3">
        <Accordion.Heading>
          <Accordion.Trigger className="grid-cols-[1fr_auto]">
            <span>Heart</span>
            <IconHeart />
          </Accordion.Trigger>
          <Accordion.Content>Content for Item 3</Accordion.Content>
        </Accordion.Heading>
      </Accordion.Item>
      <hr className="hr" />
      <Accordion.Item value="item-4">
        <Accordion.Heading>
          <Accordion.Trigger className="grid-cols-[1fr_auto]">
            <span>Spade</span>
            <IconSpade />
          </Accordion.Trigger>
          <Accordion.Content>Content for Item 4</Accordion.Content>
        </Accordion.Heading>
      </Accordion.Item>
    </Accordion>
  );
}

Multiple

Adding multiple allows items to open independently.

'use client';

import { Accordion } from '@skeletonlabs/skeleton-react';

export default function () {
  return (
    <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 className="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 className="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.

'use client';

import { Accordion } from '@skeletonlabs/skeleton-react';
import { Club as IconClub, Diamond as IconDiamond, Heart as IconHeart, Spade as IconSpade } from 'lucide-react';

export default function () {
  return (
    <Accordion>
      <Accordion.Item value="item-1">
        <Accordion.Heading>
          <Accordion.Trigger className="grid-cols-[1fr_auto]">
            <span>Club</span>
            <IconClub />
          </Accordion.Trigger>
          <Accordion.Content>Content for Item 1</Accordion.Content>
        </Accordion.Heading>
      </Accordion.Item>
      <hr className="hr" />
      <Accordion.Item value="item-2">
        <Accordion.Heading>
          <Accordion.Trigger className="grid-cols-[1fr_auto]">
            <span>Diamond</span>
            <IconDiamond />
          </Accordion.Trigger>
          <Accordion.Content>Content for Item 2</Accordion.Content>
        </Accordion.Heading>
      </Accordion.Item>
      <hr className="hr" />
      <Accordion.Item value="item-3">
        <Accordion.Heading>
          <Accordion.Trigger className="grid-cols-[1fr_auto]">
            <span>Heart</span>
            <IconHeart />
          </Accordion.Trigger>
          <Accordion.Content>Content for Item 3</Accordion.Content>
        </Accordion.Heading>
      </Accordion.Item>
      <hr className="hr" />
      <Accordion.Item value="item-4">
        <Accordion.Heading>
          <Accordion.Trigger className="grid-cols-[1fr_auto]">
            <span>Spade</span>
            <IconSpade />
          </Accordion.Trigger>
          <Accordion.Content>Content for Item 4</Accordion.Content>
        </Accordion.Heading>
      </Accordion.Item>
    </Accordion>
  );
}

State

Item 1Content for Item 1

Item 2Content for Item 2

Item 3Content for Item 3