shadcn.io is not affiliated with official shadcn/ui
Collapsible examples · Standard
Controlled Collapsible for React
A collapsible whose open state lives outside it, printed in a status line above the trigger.
Sometimes the rest of the page needs to know whether a section is open. Here the open state lives in the component that renders the collapsible, and a status line above the trigger prints Open or Closed from it. Control it this way to sync with other UI, save the state or open it from somewhere else.
Preview
Installation
FAQ
How does this file wire the open state?
isOpen is state in the demo, starting false. The status line prints Open or Closed from it, and Collapsible is controlled with that same value.
Pass open and onOpenChange. The callback receives the new boolean, so this file hands it setIsOpen.
How do I make it start open?
Start the state at true. The status line follows that value on the first render.
Does Toggle content still open and close the panel?
Yes. The trigger asks the collapsible to change, the change handler writes the state, and the collapsible and the status line both read it.
How do I open it from a second button?
Set the state from that button. The collapsible opens because it reads the same value as the trigger.
Related
- Simple CollapsibleA ghost Toggle button with a chevron that
- Inline Trigger CollapsibleA question with an up-down chevron at the
- Standard Accordion with ChevronA bordered accordion of three questions
- Collapsible with IconA Show more information trigger with a
- Standard DialogA share dialog with a read-only link, a
- Card CollapsibleA card with a Features header that