Collapsible

An accessible show/hide disclosure.

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>

Open by default

This panel starts open via [open]="true".

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

Card

<div buiCollapsible class="rounded-lg border">
  <button buiCollapsibleTrigger class="flex w-full justify-between px-4 py-3">Title <svg><!-- chevron --></svg></button>
  <div buiCollapsibleContent class="border-t px-4 py-3">…</div>
</div>

Avatar list

<div buiCollapsible class="space-y-2">
  <button buiCollapsibleTrigger buiButton variant="outline" class="w-full justify-between">Team members (4) <svg><!-- chevron --></svg></button>
  <div buiCollapsibleContent class="space-y-2">… avatar rows …</div>
</div>

File tree

main.ts

styles.css

<!-- 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>