Collapsible

import { BuiCollapsible, BuiCollapsibleTrigger, BuiCollapsibleContent } from 'ng-blatui';

<div buiCollapsible>
  <button buiCollapsibleTrigger buiButton variant="outline">Toggle</button>
  <div buiCollapsibleContent class="pt-2">Hidden content</div>
</div>

<div buiCollapsible [open]="true">…starts expanded…</div>

<div buiCollapsible class="rounded-lg border">
  <!-- mark the trigger `group` so the chevron can rotate via its data-state -->
  <button buiCollapsibleTrigger class="group flex w-full justify-between px-4 py-3">
    Title
    <svg class="size-4 transition-transform group-data-[state=open]:rotate-180"><!-- chevron --></svg>
  </button>
  <div buiCollapsibleContent class="border-t px-4 py-3">…</div>
</div>

<div buiCollapsible class="space-y-2">
  <button buiCollapsibleTrigger buiButton variant="outline" class="group w-full justify-between">
    Team members (4)
    <svg class="size-4 transition-transform group-data-[state=open]:rotate-180"><!-- chevron --></svg>
  </button>
  <div buiCollapsibleContent class="space-y-2">… avatar rows …</div>
</div>

<!-- nest a buiCollapsible inside the content for sub-folders -->
<div buiCollapsible [open]="true">
  <button buiCollapsibleTrigger buiButton variant="ghost" class="w-full justify-start gap-2"><svg><!-- folder --></svg> src</button>
  <div buiCollapsibleContent class="ml-3 border-l pl-3">
    <p>main.ts</p>
    <div buiCollapsible>…nested folder…</div>
  </div>
</div>