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 <div class="flex items-center gap-2">
4 {{ svg src="icons/star" class="size-4 shrink-0" aria-hidden="true" }}
5 Show details
6 </div>
7 {{ /slot:trigger }}
8 {{ slot:panel }}
9 Use
10 <code>slot:trigger</code>
11 for any HTML content in the trigger button — icons, badges, or custom layouts.
12 {{ /slot:panel }}
13{{ /partial:components/primitives/disclosure }}
{{ partial:components/primitives/disclosure }}
{{ slot:trigger }}
<div class="flex items-center gap-2">
{{ svg src="icons/star" class="size-4 shrink-0" aria-hidden="true" }}
Show details
</div>
{{ /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 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 {{# ===== Trigger ===== #}}
18 {{ partial:components/primitives/button intent="link" class="group w-full justify-between gap-3 text-foreground border border-foreground hover:bg-muted aria-expanded:font-bold " }}
19 {{ slot:attrs }}
20 :id="$id('disclosure-trigger')" :aria-expanded="isOpen" :aria-controls="$id('disclosure-panel')"
21 @click="isOpen = !isOpen"
22 {{ /slot:attrs }}
23 {{ if label }}
24 {{ label }}
25 {{ else }}
26 {{ slot:trigger }}
27 {{ /if }}
28 {{ slot:after }}
29 <span
30 class="text-muted-foreground shrink-0 transition-transform duration-200 group-aria-expanded:rotate-180"
31 aria-hidden="true"
32 >
33 {{ svg src="icons/chevron-down" class="size-5" }}
34 </span>
35 {{ /slot:after }}
36 {{ /partial:components/primitives/button }}
37 {{# ==== Panel ===== #}}
38 <div
39 x-show="isOpen"
40 x-collapse
41 class="border-foreground border border-t-0"
42 :id="$id('disclosure-panel')"
43 role="region"
44 :aria-labelledby="$id('disclosure-trigger')"
45 style="display: none"
46 >
47 <div class="text-muted-foreground px-4 pt-3 pb-4 text-sm leading-relaxed">
48 {{ if slot:panel }}
49 {{ slot:panel }}
50 {{ else }}
51 {{ slot }}
52 {{ /if }}
53 </div>
54 </div>
55</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 w-full {class}'
| tw_merge }}
<div
class="{{ _class }}"
x-data="{ isOpen: {{ open == 'true' ? 'true' : 'false' }} }"
x-id="['disclosure-trigger', 'disclosure-panel']"
>
{{# ===== Trigger ===== #}}
{{ partial:components/primitives/button intent="link" class="group w-full justify-between gap-3 text-foreground border border-foreground hover:bg-muted aria-expanded:font-bold " }}
{{ slot:attrs }}
:id="$id('disclosure-trigger')" :aria-expanded="isOpen" :aria-controls="$id('disclosure-panel')"
@click="isOpen = !isOpen"
{{ /slot:attrs }}
{{ if label }}
{{ label }}
{{ else }}
{{ slot:trigger }}
{{ /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 }}
{{# ==== Panel ===== #}}
<div
x-show="isOpen"
x-collapse
class="border-foreground border border-t-0"
:id="$id('disclosure-panel')"
role="region"
:aria-labelledby="$id('disclosure-trigger')"
style="display: none"
>
<div class="text-muted-foreground px-4 pt-3 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