DocsComponentsCollapsible

Collapsible

A section that shows and hides its content.

Alpine.jsdepends on button3 files

<pb-ui.collapsible class="flex w-[350px] flex-col gap-2">
  <div class="flex items-center justify-between gap-4 px-4">
    <h4 class="text-sm font-semibold">@ada has starred 3 repositories</h4>
    <pb-ui.collapsible-trigger>
      <pb-ui.button variant="ghost" size="icon" class="size-8" aria-label="Show">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></svg>
      </pb-ui.button>
    </pb-ui.collapsible-trigger>
  </div>
  <div class="rounded-md border px-4 py-2 font-mono text-sm">pyblade/pyblade</div>
  <pb-ui.collapsible-content class="flex flex-col gap-2">
    <div class="rounded-md border px-4 py-2 font-mono text-sm">pyblade/pyblade-ui</div>
    <div class="rounded-md border px-4 py-2 font-mono text-sm">alpinejs/alpine</div>
  </pb-ui.collapsible-content>
</pb-ui.collapsible>

Installation

pyblade-ui add collapsible

Install the dependencies
button and Alpine.js, loaded in your <head>.

Copy these files into your project

components/ui/collapsible.html

@props({'open': False})
<div data-slot="collapsible" x-data="{ open: {{ str(bool(open)).lower() }} }" x-bind:data-state="open ? 'open' : 'closed'" {{ attributes.cn("") }}>{{ slot }}</div>

components/ui/collapsible_trigger.html

<span data-slot="collapsible-trigger" x-on:click="open = !open" {{ attributes.cn("contents") }}>{{ slot }}</span>

components/ui/collapsible_content.html

<div data-slot="collapsible-content" x-show="open" x-cloak x-transition.opacity {{ attributes.cn("") }}>{{ slot }}</div>

Update the path to fit your project
The components folder is the one set in pyblade.toml.

Usage

The tags <pb-ui.collapsible> <pb-ui.collapsible-trigger> <pb-ui.collapsible-content> are available in all your templates.

<pb-ui.collapsible>
  <pb-ui.collapsible-trigger><pb-ui.button variant="ghost">Toggle</pb-ui.button></pb-ui.collapsible-trigger>
  <pb-ui.collapsible-content>Hidden content</pb-ui.collapsible-content>
</pb-ui.collapsible>

Props

Prop	Default
open	False

Any other attribute (class, id, x-on:click, hx-post…) is passed to the root element; your Tailwind classes win over the component's.

‹ Accordion Carousel ›