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.

'use client';

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

export default function () {
  const [value, setValue] = useState(['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.';

  return (
    <Accordion value={value} onValueChange={(e) => setValue(e.value)}>
      <Accordion.Item value="item-1">
        <Accordion.Heading>
          <Accordion.Trigger>
            <IconClub />
            <span>Club</span>
            <Accordion.Indicator>{value.includes('item-1') ? '-' : '+'}</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>
            <IconDiamond />
            <span>Diamond</span>
            <Accordion.Indicator>{value.includes('item-2') ? '-' : '+'}</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>
            <IconHeart />
            <span>Heart</span>
            <Accordion.Indicator>{value.includes('item-3') ? '-' : '+'}</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>
            <IconSpade />
            <span>Spade</span>
            <Accordion.Indicator>{value.includes('item-4') ? '-' : '+'}</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/composed';

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/composed';

export default function () {
  return (
    <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 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>
  );
}

Multiple

Adding multiple allows items to open independently.

'use client';

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

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/composed';
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

Collapsible

Item 1Content for Item 1

Item 2Content for Item 2

Item 3Content for Item 3

Multiple

Item 1Content for Item 1

Item 2Content for Item 2

Item 3Content for Item 3

Grid Columns

ClubContent for Item 1

DiamondContent for Item 2

HeartContent for Item 3

SpadeContent for Item 4