# Collapsible

An interactive component which expands and collapses a panel.

- Install: `php artisan blatui:add collapsible`
- Source: https://blatui.remix-it.com/r/collapsible.json
- npm: `npm install -D @alpinejs/collapse`

## resources/views/components/ui/collapsible.blade.php

```blade
@props(['open' => false])

<div data-slot="collapsible" x-data="{ open: @js((bool) $open) }" x-id="['blat-collapsible']" {{ $attributes }}>
    {{ $slot }}
</div>
```

## resources/views/components/ui/collapsible-content.blade.php

```blade
<div
    data-slot="collapsible-content"
    :id="$id('blat-collapsible')"
    x-show="open"
    x-collapse
    x-cloak
    :data-state="open ? 'open' : 'closed'"
    {{ $attributes }}
>
    {{ $slot }}
</div>
```

## resources/views/components/ui/collapsible-trigger.blade.php

```blade
<button
    type="button"
    data-slot="collapsible-trigger"
    @click="open = !open"
    :aria-controls="$id('blat-collapsible')"
    :data-state="open ? 'open' : 'closed'"
    :aria-expanded="open"
    {{ $attributes }}
>
    {{ $slot }}
</button>
```