Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Simple Collapsible for Solid

A ghost Toggle button with a chevron that shows and hides one paragraph of collapsible content.

UI library: Ark UI

A ghost Toggle button with a chevron at the end. The chevron turns as one paragraph shows and hides below the button.

Start here, then swap in your own content. If the block needs a heading and a frame, wrap it in a Card. In Solid, Ark UI only shows and hides this region.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

Collapsible anatomy: root, trigger, indicator, content

Usage

<Collapsible class="w-full max-w-lg">
    <CollapsibleTrigger asChild={props => <Button {...props({
    "class": "group"
  })} variant="ghost">
        Toggle
        <ChevronDownIcon aria-hidden="true" class="transition-transform duration-200 group-aria-expanded:rotate-180" data-icon="inline-end" />
      </Button>} />
    <CollapsibleContent class="mt-2 text-muted-foreground text-sm">
      This is the collapsible content. You can put any content here.
    </CollapsibleContent>
  </Collapsible>

FAQ

How do I use my own button as the trigger?

The trigger renders our Button with variant="ghost", so it keeps the button's look and the trigger's behavior. Use the trigger's asChild function and spread its props on the button.

What does variant ghost change on this button?

It's the transparent button with a hover fill, so the trigger stays quiet next to the content. Any other variant works the same way.

Does the chevron on Toggle rotate?

Yes. The button has the group class and the trigger sets aria-expanded on it while open, so group-aria-expanded:rotate-180 turns the chevron. data-icon="inline-end" spaces it after the label, and aria-hidden keeps the name Toggle.

How do I start the paragraph visible?

Set defaultOpen on Collapsible.

It starts hidden.

What is mt-2 for?

It's on CollapsibleContent, so the paragraph sits a step below the button. The paragraph is text-muted-foreground text-sm.

How do I toggle it from the keyboard?

Tab reaches the trigger, a button named Toggle, and Space or Enter shows or hides the paragraph.

API Reference

Collapsible

Sets asChild and props. The rest is on the Collapsible page.

Button

Sets props, group and variant="ghost". The rest is on the Button page.

All 23 collapsible examples