Collapsible

1
function Uncontrolled() {
2
  const [transition, setTransition] = createSignal(true)
3

4
  return (
5
    <div class="max-w-xs w-full space-y-3">
6
      <Switch label="Transition" checked={transition()} onChange={setTransition} />
7

8
      <div class="h-40">
9
        <Card
10
          classes={{
11
            root: 'py-3 rounded-lg',
12
            body: 'px-3 mb-0',
13
          }}
14
        >
15
          <Collapsible
16
            transition={transition()}
17
            triggerRender={(context) => (
18
              <Button
19
                {...context.triggerProps}
20
                variant="ghost"
21
                class="text-sm w-full justify-between"
22
              >
23
                <span>How do I reset my password?</span>
24
                <Icon
25
                  name="i-lucide-chevron-down"
26
                  aria-hidden="true"
27
                  class={`text-muted-foreground shrink-0 size-4 transition-transform ${context.isOpen ? 'rotate-180' : ''}`}
28
                />
29
              </Button>
30
            )}
31
          >
32
            <div class="text-sm text-muted-foreground pt-3">
33
              You can reset your password from Account settings. We send a verification link to the
34
              primary email on the workspace.
35
            </div>
36
          </Collapsible>
37
        </Card>
38
      </div>
39
    </div>
40
  )
41
}

1
function Controlled() {
2
  const [open, setOpen] = createSignal(true)
3
  const [locked, setLocked] = createSignal(false)
4

5
  return (
6
    <div class="max-w-xl space-y-3">
7
      <div class="flex flex-wrap gap-2 items-center">
8
        <Button size="sm" onClick={() => !locked() && setOpen((value) => !value)}>
9
          {open() ? 'Hide invoice details' : 'Show invoice details'}
10
        </Button>
11
        <Switch
12
          label="Lock edits"
13
          checked={locked()}
14
          onChange={setLocked}
15
          checkedIcon="i-lucide-lock"
16
          uncheckedIcon="i-lucide-lock-open"
17
        />
18
      </div>
19

20
      <Collapsible
21
        open={open()}
22
        disabled={locked()}
23
        onOpenChange={setOpen}
24
        classes={{
25
          root: 'w-108 rounded-lg b-(1 border)',
26
          trigger:
27
            'w-full px-4 py-3 text-left text-sm font-medium flex items-center justify-between data-disabled:opacity-60',
28
          content: 'px-4 pb-4 text-sm text-foreground',
29
        }}
30
        triggerRender={(context) => (
31
          <button {...context.triggerProps} class="flex w-full items-center justify-between">
32
            <span>June invoice #INV-2048</span>
33
            <Icon
34
              name="i-lucide-chevron-down"
35
              aria-label="Toggle invoice details"
36
              class={cn('text-muted-foreground transition-transform', open() ? 'rotate-180' : '')}
37
            />
38
          </button>
39
        )}
40
      >
41
        <div class="space-y-2">
42
          <div class="flex items-center justify-between">
43
            <span class="text-muted-foreground">Plan</span>
44
            <span>Team Pro</span>
45
          </div>
46
          <div class="flex items-center justify-between">
47
            <span class="text-muted-foreground">Seats</span>
48
            <span>18 active</span>
49
          </div>
50
          <div class="text-muted-foreground flex gap-2 items-center">
51
            <Icon name="i-lucide-info" class="size-4" />
52
            <span>Locked invoices cannot be expanded from the row trigger.</span>
53
          </div>
54
        </div>
55
      </Collapsible>
56
    </div>
57
  )
58
}

1
function Stateful() {
2
  return (
3
    <div class="max-w-xl space-y-2">
4
      <Collapsible
5
        defaultOpen
6
        classes={{
7
          root: 'rounded-lg b-(1 border)',
8
          trigger: 'w-xl px-3 py-2 text-left text-sm flex items-center justify-between',
9
          content: 'px-3 pb-3 text-sm text-foreground',
10
        }}
11
        triggerRender={(context) => (
12
          <>
13
            <div class="min-w-0">
14
              <div class="flex gap-2 items-center">
15
                <Icon name="i-lucide-rocket" class="text-muted-foreground shrink-0 size-4" />
16
                <span class="font-medium truncate">Production deploy #4812</span>
17
              </div>
18
              <p class="text-xs text-muted-foreground mt-0.5">Completed 6 minutes ago</p>
19
            </div>
20
            <Button
21
              {...context.triggerProps}
22
              aria-label="Toggle deploy details"
23
              size="sm"
24
              variant="secondary"
25
              classes={{
26
                label: `transition-transform ${context.isOpen ? 'rotate-180' : ''}`,
27
              }}
28
            >
29
              <Icon name="i-lucide-chevron-down" />
30
            </Button>
31
          </>
32
        )}
33
      >
34
        <div class="space-y-1.5">
35
          <p>Commit b8a29c7 promoted the billing workspace and search index workers.</p>
36
          <p class="text-muted-foreground">Runtime: 2m 14s. Region: iad1. Rollback available.</p>
37
        </div>
38
      </Collapsible>
39
    </div>
40
  )
41
}