Collapsible

A standalone disclosure: one trigger that shows and hides one region of content. It is the bare WAI-ARIA Disclosure pattern with no surrounding chrome.

Collapsible vs Accordion vs FAQ — when to use which

Collapsible (this component) — a single independent show/hide: a "read more", an advanced-options panel. Stack several for loosely-related toggles that need no coordination and no card chrome.
Accordion — a coordinated group of panels with optional single-open behavior and card chrome. Reach for it when opening one panel should be able to close the others.
FAQ — an accordion specialized for questions that also emits FAQPage structured data derived from what it renders. Use it for a real question list.
Reveal — for scroll- or load-triggered entrance animation, not a user toggle.

Basic Usage

The default slot is the collapsible content; trigger is the clickable label.

Collapsible is block-level — it fills its container's width, and that width does not change as it opens or closes (watch the previews below stay put; in your app it spans whatever column you place it in).

Show / hide a panel

<x-wirekit::collapsible style="width: 24rem; max-width: 100%" trigger="What is your refund policy?">
    <x-wirekit::text>We offer a 30-day money-back guarantee on all plans, no questions asked.</x-wirekit::text>
</x-wirekit::collapsible>

Open by Default

Pass :open="true" to render the region expanded on first paint.

Initially open

Orders ship within 2 business days. Tracking is emailed once your parcel leaves the warehouse.

<x-wirekit::collapsible style="width: 24rem; max-width: 100%" trigger="Shipping details" :open="true">
    <x-wirekit::text>Orders ship within 2 business days. Tracking is emailed once your parcel leaves the warehouse.</x-wirekit::text>
</x-wirekit::collapsible>

Rich Trigger

For a trigger that needs an icon or markup, use a <x-slot:trigger> instead of the string prop. The slot renders inside a <button>, which takes text-level content only, so a layout primitive in it renders as a span, as as="span" does below.

Trigger with an icon

<x-wirekit::collapsible style="width: 24rem; max-width: 100%">
    <x-slot:trigger>
        <x-wirekit::row as="span" gap="sm" style="align-items: center;">
            <x-wirekit::icon name="filter" size="sm" />
            <x-wirekit::text as="span" weight="medium">Advanced options</x-wirekit::text>
        </x-wirekit::row>
    </x-slot:trigger>
    <x-wirekit::stack gap="sm">
        <x-wirekit::checkbox name="opt-cache" label="Enable response caching" />
        <x-wirekit::checkbox name="opt-minify" label="Minify HTML output" />
    </x-wirekit::stack>
</x-wirekit::collapsible>

In Context — an FAQ

The most common use: a stack of independent disclosures. Width stays put as items open and close.

FAQ list

<x-wirekit::stack style="width: 30rem; max-width: 100%" gap="md">
    <x-wirekit::collapsible trigger="Can I change plans later?">
        <x-wirekit::text>Yes — upgrade or downgrade anytime from Billing. Changes are prorated to the day.</x-wirekit::text>
    </x-wirekit::collapsible>
    <x-wirekit::divider />
    <x-wirekit::collapsible trigger="Do you offer team seats?">
        <x-wirekit::text>Every paid plan includes unlimited seats. Invite teammates from Settings → Members.</x-wirekit::text>
    </x-wirekit::collapsible>
    <x-wirekit::divider />
    <x-wirekit::collapsible trigger="Is my data exportable?">
        <x-wirekit::text>Export everything to CSV or JSON at any time — your data is never locked in.</x-wirekit::text>
    </x-wirekit::collapsible>
</x-wirekit::stack>

Find in Page

Collapsed content stays findable by the browser's own search. When a match lands inside it, the browser expands the region, scrolls to it and highlights the text, and the trigger reports it as expanded. Until then the content is out of sight, out of the tab order and hidden from screen readers.

Turn it off for a spoiler, or any content that must stay closed until someone opens it:

<x-wirekit::collapsible trigger="Show the ending" :findable="false">
    It was the butler.
</x-wirekit::collapsible>

This is a progressive enhancement. It works in browsers that support hidden="until-found"; in the rest, collapsed content is hidden entirely and the browser search does not look inside it.

Collapsed, the region keeps its box. getClientRects() reports it as visible while the screen is drawn correctly — so a test that decides "is it open?" from geometry reads every collapsed region as open, and so does anything you style off its size. Read the hidden attribute, never the geometry, and keep padding and borders on the element inside the region. The accordion page explains it at length.

Props

Prop	Type	Default	Description
`trigger`	string\|null	`null`	The trigger label. For rich content, use a `<x-slot:trigger>` instead.
`open`	bool	`false`	Whether the region starts expanded
`findable`	bool	`true`	Let the browser's find in page search collapsed content and expand the region a match lands in. See Find in Page
`scope`	string\|null	`null`	Scoped personalization name

Accessibility

An aria-label or aria-labelledby of yours makes the collapsible a group named by it.
The trigger is a native <button>, so it is keyboard-focusable and operable out of the box.
On a coarse pointer, and inside an element with data-wk-touch, the trigger takes the 44px height every button takes there, across its whole width.
aria-expanded reflects the open/closed state; aria-controls links the trigger to the region it toggles.
The chevron is decorative (aria-hidden="true").
The region animates open/closed via Alpine's x-collapse, which respects prefers-reduced-motion.

Keyboard Interaction

Key	Action
`Tab`	Move focus to the trigger
`Enter` / `Space`	Toggle the region open or closed

Design Tokens

Token	Used for
`--color-wk-text`	Trigger + content text
`--color-wk-ring`	Trigger focus ring
`--radius-wk-sm`	Trigger focus-ring corner radius
`--transition-wk-duration`	Chevron rotation and expand / collapse timing
`--padding-wk-y-lg`	Gap between trigger and content

Config Defaults

The defaults live in config/wirekit.php under components.collapsible. Override them globally:

'components' => [
    'collapsible' => ['findable' => false], // keep collapsed content out of the browser's find in page
],

Collapsible

Was this page helpful?