Collapsible

An interactive component that toggles the visibility of its content section.

Preview

Nearby Attractions

Solang Valley - 14 km

Usage

tsx
import {
  Collapsible,
  CollapsibleTrigger,
  CollapsibleContent,
} from "zostel-ui";

<Collapsible>
  <CollapsibleTrigger>
    Toggle destinations
  </CollapsibleTrigger>
  <div>Always visible item</div>
  <CollapsibleContent>
    <div>Hidden item 1</div>
    <div>Hidden item 2</div>
  </CollapsibleContent>
</Collapsible>

Props

open
Type: boolean
Default: —

The controlled open state of the collapsible.

defaultOpen
Type: boolean
Default: false

Whether the collapsible is open by default.

onOpenChange
Type: (open: boolean) => void
Default: —

Callback fired when the open state changes.

disabled
Type: boolean
Default: false

When true, prevents the user from interacting.
Previous Accordion Next Navigation Menu