Collapse

Basic Usage

Hide secondary detail behind a toggle. Pass the label as trigger_text; the chevron is appended and rotated for you.

Extra detail that stays out of the way until someone needs it.

<c-ui.collapse trigger_text="Show details">
    <div class="pt-2 text-sm">
        Extra detail that stays out of the way until someone needs it.
    </div>
</c-ui.collapse>

{% cotton ui.collapse trigger_text="Show details" %}
    <div class="pt-2 text-sm">
        Extra detail that stays out of the way until someone needs it.
    </div>
{% endcotton %}

Custom Trigger

Provide a custom trigger element with the trigger slot for full control over the appearance. The chevron is still appended and rotated; set :chevron="false" to drop it, or pass an icon slot to replace it.

Searched the knowledge base across 14 documents and ranked the passages most relevant to the billing question.

Key findings

Accounts are invoiced monthly on their signup anniversary.
Seats added mid cycle are prorated automatically.
Annual plans include two months free over paying monthly.

Cited 3 sources, confidence high.

<c-ui.collapse>
    <c-slot name="trigger">
        <span class="inline-flex items-center gap-2 text-sm text-zinc-600">
            <svg><!-- wrench --></svg>
            Tool called: <span class="font-medium">Knowledge Agent</span>
        </span>
    </c-slot>

    {# the chevron is appended and rotated for you #}
    <div class="mt-2 p-4 bg-zinc-50 rounded-md text-sm space-y-2">
        <p>Searched the knowledge base across 14 documents and ranked the most relevant passages.</p>
        <p class="font-medium">Key findings</p>
        <ul class="list-disc pl-5 space-y-1">
            <li>Accounts are invoiced monthly on their signup anniversary.</li>
            <li>Seats added mid cycle are prorated automatically.</li>
            <li>Annual plans include two months free over paying monthly.</li>
        </ul>
        <p>Cited 3 sources, confidence high.</p>
    </div>
</c-ui.collapse>

{% cotton ui.collapse %}
    {% cotton:slot trigger %}
        <span class="inline-flex items-center gap-2 text-sm text-zinc-600">
            <svg><!-- wrench --></svg>
            Tool called: <span class="font-medium">Knowledge Agent</span>
        </span>
    {% endcotton:slot %}

    {# the chevron is appended and rotated for you #}
    <div class="mt-2 p-4 bg-zinc-50 rounded-md text-sm space-y-2">
        <p>Searched the knowledge base across 14 documents and ranked the most relevant passages.</p>
        <p class="font-medium">Key findings</p>
        <ul class="list-disc pl-5 space-y-1">
            <li>Accounts are invoiced monthly on their signup anniversary.</li>
            <li>Seats added mid cycle are prorated automatically.</li>
            <li>Annual plans include two months free over paying monthly.</li>
        </ul>
        <p>Cited 3 sources, confidence high.</p>
    </div>
{% endcotton %}

Open by Default

Use expanded to show the content by default.

This content is visible by default and can be collapsed by clicking the trigger.

<c-ui.collapse trigger-text="Hide Details" expanded>
    <div class="mt-2 p-4 bg-zinc-50 dark:bg-zinc-800 rounded-md">
        <p class="text-sm">
            This content is visible by default and can be collapsed.
        </p>
    </div>
</c-ui.collapse>

{% cotton ui.collapse trigger-text="Hide Details" expanded %}
    <div class="mt-2 p-4 bg-zinc-50 dark:bg-zinc-800 rounded-md">
        <p class="text-sm">
            This content is visible by default and can be collapsed.
        </p>
    </div>
{% endcotton %}

Reference

Props

Name	Description	Type	Options	Default
`trigger-text`	Text to display on the default button trigger. Only used when trigger slot is not provided.	str	—	Toggle
`:expanded`	Set to True to show content by default.	bool	`TrueFalse`	False
`:chevron`	Show a chevron next to the trigger that rotates when expanded. Applies to both the default and a custom trigger slot.	bool	`TrueFalse`	True

Slots

Name	Description	Type	Options
`trigger`	Custom trigger content. Replaces the default button text; the chevron is still appended automatically. Toggles the content on click.	slot	—
`icon`	Replace the default chevron with your own icon. The component still rotates it on expand.	slot	—
`default`	The content to show/hide with collapse animation.	slot	—

Behavior

Animation: Uses Alpine.js x-collapse for smooth height transitions
Initial State: Content is hidden by default
Toggle: Clicking the trigger toggles visibility
Multiple Instances: Each collapse component manages its own state independently