Collapsible

A collapsible panel controlled by a button.

<ui:collapsible.root class="w-48 text-sm">
    <ui:collapsible.trigger class="group cursor-pointer rounded-md bg-accent px-1.5 py-1 font-semibold w-full flex items-center gap-1.5">
        <div class="group-data-[state=open]:rotate-90 transition-transform size-4 leading-none grid place-items-center">▶</div>
        <ui:collapsible.triggerText openText="Show recovery keys" closeText="Hide recovery keys" />
    </ui:collapsible.trigger>
    <ui:collapsible.content>
        <div class="mt-2 flex flex-col gap-1.5 rounded-md bg-accent py-2 px-3">
            <p>alien-bean-pasta</p>
            <p>wild-irish-burrito</p>
            <p>horse-battery-staple</p>
        </div>
    </ui:collapsible.content>
</ui:collapsible.root>

import { mount } from 'fluid-primitives';
import { Collapsible } from 'fluid-primitives/collapsible';

mount('collapsible', ({ props }) => {
	const collapsible = new Collapsible(props);
	collapsible.init();
	return collapsible;
});

Features

Full keyboard navigation support
Supports animation via CSS transitions or animations
Supports custom open and collapsed heights/widths

Installation

typo3 ui:add collapsible

Read more about installing Components and Primitives.

Examples

Default Open

Set the collapsible to be open by default.

alien-bean-pasta

wild-irish-burrito

horse-battery-staple

<ui:collapsible.root defaultOpen="{true}" class="w-48 text-sm">
    <ui:collapsible.trigger class="group cursor-pointer rounded-md bg-accent px-1.5 py-1 font-semibold w-full flex items-center gap-1.5">
        <div class="group-data-[state=open]:rotate-90 transition-transform size-4 leading-none grid place-items-center">▶</div>
        <ui:collapsible.triggerText openText="Show recovery keys" closeText="Hide recovery keys" />
    </ui:collapsible.trigger>
    <ui:collapsible.content>
        <div class="mt-2 flex flex-col gap-1.5 rounded-md bg-accent py-2 px-3">
            <p>alien-bean-pasta</p>
            <p>wild-irish-burrito</p>
            <p>horse-battery-staple</p>
        </div>
    </ui:collapsible.content>
</ui:collapsible.root>

Disabled

Prevent the collapsible from being toggled.

<ui:collapsible.root class="w-48 text-sm" disabled="{true}">
    <ui:collapsible.trigger class="group cursor-pointer rounded-md bg-accent px-1.5 py-1 font-semibold w-full flex items-center gap-1.5 data-[disabled]:cursor-not-allowed data-[disabled]:opacity-70">
        <div class="group-data-[state=open]:rotate-90 transition-transform size-4 leading-none grid place-items-center">▶</div>
        <ui:collapsible.triggerText openText="Show recovery keys" closeText="Hide recovery keys" />
    </ui:collapsible.trigger>
    <ui:collapsible.content>
        <div class="mt-2 flex flex-col gap-1.5 rounded-md bg-accent py-2 px-3">
            <p>alien-bean-pasta</p>
            <p>wild-irish-burrito</p>
            <p>horse-battery-staple</p>
        </div>
    </ui:collapsible.content>
</ui:collapsible.root>

Anatomy

<primitives:collapsible.root>
    <primitives:collapsible.trigger>
        <primitives:collapsible.triggerText />
    </primitives:collapsible.trigger>
    <primitives:collapsible.content />
</primitives:collapsible.root>