Collapsible

@thomkrupa starred 3 repositories

Toggle

@data-slot/collapsible

@bejamas/ui

@astrojs/astro

---
import { ChevronsUpDownIcon } from '@lucide/astro';

import { Button } from '@bejamas/ui/components/button';
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@bejamas/ui/components/collapsible';
---

<Collapsible class="w-[350px] flex flex-col gap-2">
  <div class="flex items-center justify-between gap-4 px-4">
    <span class="text-sm font-semibold">@thomkrupa starred 3 repositories</span>
    <CollapsibleTrigger asChild>
      <Button variant="ghost" size="icon" class="size-8">
        <ChevronsUpDownIcon class="size-4" />
        <span class="sr-only">Toggle</span>
      </Button>
    </CollapsibleTrigger>
  </div>
  <div class="rounded-md border px-4 py-2 font-mono text-sm">@data-slot/collapsible</div>
  <CollapsibleContent class="flex flex-col gap-2">
    <div class="rounded-md border px-4 py-2 font-mono text-sm">@bejamas/ui</div>
    <div class="rounded-md border px-4 py-2 font-mono text-sm">@astrojs/astro</div>
  </CollapsibleContent>
</Collapsible>

View CodeHide Code

Installation

bun

bunx bejamas add collapsible

npm

npx bejamas add collapsible

pnpm

pnpm dlx bejamas add collapsible

yarn

yarn dlx bejamas add collapsible

Usage

---
import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '@bejamas/ui/components/collapsible';
import { Button } from '@bejamas/ui/components/button';
---

<Collapsible>
  <CollapsibleTrigger>
    <Button variant="ghost">Toggle</Button>
  </CollapsibleTrigger>
  <CollapsibleContent>
    Hidden content here
  </CollapsibleContent>
</Collapsible>

Examples

Default open

Expanded by default

Toggle

This content is visible by default

---
import { ChevronsUpDownIcon } from '@lucide/astro';

import { Button } from '@bejamas/ui/components/button';
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@bejamas/ui/components/collapsible';
---

<Collapsible open class="w-[350px] flex flex-col gap-2">
  <div class="flex items-center justify-between gap-4 px-4">
    <span class="text-sm font-semibold">Expanded by default</span>
    <CollapsibleTrigger asChild>
      <Button variant="ghost" size="icon" class="size-8">
        <ChevronsUpDownIcon class="size-4" />
        <span class="sr-only">Toggle</span>
      </Button>
    </CollapsibleTrigger>
  </div>
  <CollapsibleContent class="flex flex-col gap-2">
    <div class="rounded-md border px-4 py-2 font-mono text-sm">This content is visible by default</div>
  </CollapsibleContent>
</Collapsible>

View CodeHide Code

API Reference

Events

The collapsible emits custom events that you can listen to:

Event	Detail	Description
collapsible:change	{ open: boolean }	Fired when the open state changes

<Collapsible id="my-collapsible">
  <CollapsibleTrigger>Toggle</CollapsibleTrigger>
  <CollapsibleContent>Hidden content</CollapsibleContent>
</Collapsible>

<script>
  const collapsible = document.getElementById('my-collapsible');

  collapsible.addEventListener('collapsible:change', (e) => {
    console.log('Is open:', e.detail.open);
  });
</script>

Programmatic Control

You can control the collapsible programmatically by dispatching a collapsible:set event:

const collapsible = document.getElementById('my-collapsible');

// Open the collapsible
collapsible.dispatchEvent(new CustomEvent('collapsible:set', {
  detail: { open: true }
}));

// Close the collapsible
collapsible.dispatchEvent(new CustomEvent('collapsible:set', {
  detail: { open: false }
}));

Data Attributes

The collapsible sets these data attributes that you can use for styling or querying state:

Attribute	Element	Description
data-state	collapsible, collapsible-content	Current state (open or closed)