Disclosure
Expand/collapse primitive with accessible trigger and animated panel. Requires @alpinejs/collapse.
Requires Alpine.js
Default
1{{ partial:components/primitives/disclosure label="Toggle disclosure" }}
2 This panel content is revealed when the trigger is clicked. Padding lives on the inner wrapper so the collapse
3 animation stays smooth.
4{{ /partial:components/primitives/disclosure }}
{{ partial:components/primitives/disclosure label="Toggle disclosure" }}
This panel content is revealed when the trigger is clicked. Padding lives on the inner wrapper so the collapse
animation stays smooth.
{{ /partial:components/primitives/disclosure }}
Initially Open
1{{ partial:components/primitives/disclosure label="What is a disclosure?" open="true" }}
2 This disclosure starts expanded. Pass
3 <code>open="true"</code>
4 to set the initial state.
5{{ /partial:components/primitives/disclosure }}
{{ partial:components/primitives/disclosure label="What is a disclosure?" open="true" }}
This disclosure starts expanded. Pass
<code>open="true"</code>
to set the initial state.
{{ /partial:components/primitives/disclosure }}
Custom Trigger
1{{ partial:components/primitives/disclosure }}
2 {{ slot:trigger }}
3 {{ svg src="icons/star" class="size-4 shrink-0" aria-hidden="true" }}
4 Show details
5 {{ /slot:trigger }}
6 {{ slot:panel }}
7 Use
8 <code>slot:trigger</code>
9 for any HTML content in the trigger button — icons, badges, or custom layouts.
10 {{ /slot:panel }}
11{{ /partial:components/primitives/disclosure }}
{{ partial:components/primitives/disclosure }}
{{ slot:trigger }}
{{ svg src="icons/star" class="size-4 shrink-0" aria-hidden="true" }}
Show details
{{ /slot:trigger }}
{{ slot:panel }}
Use
<code>slot:trigger</code>
for any HTML content in the trigger button — icons, badges, or custom layouts.
{{ /slot:panel }}
{{ /partial:components/primitives/disclosure }}
Props
| Name | Type | Default | Description |
|---|---|---|---|
label
|
string
|
Trigger button label text (falls back to slot:trigger, then "Toggle disclosure") | |
open
|
boolean
|
|
Initial expanded state |
class
|
string
|
Additional classes merged via tw_merge (root element only) |
Slots
| Name | Fallback / Default | Description |
|---|---|---|
default
|
||
panel
|
default slot
|
Collapsible panel content (falls back to default slot) |
trigger
|
label
|
Trigger button content as HTML (overrides label) |
Source
1{{#
2 @name Disclosure
3 @desc Expand/collapse primitive with accessible trigger and animated panel. Requires @alpinejs/collapse.
4 @param label string - Trigger button label text (falls back to slot:trigger, then "Toggle disclosure")
5 @param open boolean [false] - Initial expanded state
6 @param class string - Additional classes merged via tw_merge (root element only)
7 @slot trigger - Trigger button content as HTML (overrides label)
8 @slot panel - Collapsible panel content (falls back to default slot)
9#}}
10{{ _class = 'overflow-hidden rounded-default border border-border bg-background w-full {class}'
11 | tw_merge }}
12<div
13 class="{{ _class }}"
14 x-data="{ isOpen: {{ open == 'true' ? 'true' : 'false' }} }"
15 x-id="['disclosure-trigger', 'disclosure-panel']"
16>
17 {{ partial:components/primitives/button intent="ghost" class="group h-auto w-full justify-between gap-3 rounded-none px-4 py-3 text-left text-sm aria-expanded:bg-secondary/60 hover:bg-secondary/50" }}
18 {{ slot:attrs }}
19 :id="$id('disclosure-trigger')" :aria-expanded="isOpen" :aria-controls="$id('disclosure-panel')"
20 @click="isOpen = !isOpen"
21 {{ /slot:attrs }}
22 {{ if label }}
23 {{ label }}
24 {{ elseif slot:trigger }}
25 {{ slot:trigger }}
26 {{ else }}
27 Toggle disclosure
28 {{ /if }}
29 {{ slot:after }}
30 <span
31 class="text-muted-foreground shrink-0 transition-transform duration-200 group-aria-expanded:rotate-180"
32 aria-hidden="true"
33 >
34 {{ svg src="icons/chevron-down" class="size-5" }}
35 </span>
36 {{ /slot:after }}
37 {{ /partial:components/primitives/button }}
38 <div
39 x-show="isOpen"
40 x-collapse
41 :id="$id('disclosure-panel')"
42 role="region"
43 :aria-labelledby="$id('disclosure-trigger')"
44 style="display: none"
45 >
46 <div class="text-muted-foreground px-4 pt-1 pb-4 text-sm leading-relaxed">
47 {{ if slot:panel }}
48 {{ slot:panel }}
49 {{ else }}
50 {{ slot }}
51 {{ /if }}
52 </div>
53 </div>
54</div>
{{#
@name Disclosure
@desc Expand/collapse primitive with accessible trigger and animated panel. Requires @alpinejs/collapse.
@param label string - Trigger button label text (falls back to slot:trigger, then "Toggle disclosure")
@param open boolean [false] - Initial expanded state
@param class string - Additional classes merged via tw_merge (root element only)
@slot trigger - Trigger button content as HTML (overrides label)
@slot panel - Collapsible panel content (falls back to default slot)
#}}
{{ _class = 'overflow-hidden rounded-default border border-border bg-background w-full {class}'
| tw_merge }}
<div
class="{{ _class }}"
x-data="{ isOpen: {{ open == 'true' ? 'true' : 'false' }} }"
x-id="['disclosure-trigger', 'disclosure-panel']"
>
{{ partial:components/primitives/button intent="ghost" class="group h-auto w-full justify-between gap-3 rounded-none px-4 py-3 text-left text-sm aria-expanded:bg-secondary/60 hover:bg-secondary/50" }}
{{ slot:attrs }}
:id="$id('disclosure-trigger')" :aria-expanded="isOpen" :aria-controls="$id('disclosure-panel')"
@click="isOpen = !isOpen"
{{ /slot:attrs }}
{{ if label }}
{{ label }}
{{ elseif slot:trigger }}
{{ slot:trigger }}
{{ else }}
Toggle disclosure
{{ /if }}
{{ slot:after }}
<span
class="text-muted-foreground shrink-0 transition-transform duration-200 group-aria-expanded:rotate-180"
aria-hidden="true"
>
{{ svg src="icons/chevron-down" class="size-5" }}
</span>
{{ /slot:after }}
{{ /partial:components/primitives/button }}
<div
x-show="isOpen"
x-collapse
:id="$id('disclosure-panel')"
role="region"
:aria-labelledby="$id('disclosure-trigger')"
style="display: none"
>
<div class="text-muted-foreground px-4 pt-1 pb-4 text-sm leading-relaxed">
{{ if slot:panel }}
{{ slot:panel }}
{{ else }}
{{ slot }}
{{ /if }}
</div>
</div>
</div>
Dependencies
Packages
1composer require marcorieser/tailwind-merge-statamic
2npm install alpinejs @alpinejs/collapse
composer require marcorieser/tailwind-merge-statamic npm install alpinejs @alpinejs/collapse