Collapsible

An interactive component which expands/collapses a panel.

Basic Collapsible

@peduarte starred 3 repositories

@radix-ui/primitives

FAQ Style

Usage

import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@/components/ui/collapsible"

const [isOpen, setIsOpen] = React.useState(false)

<Collapsible open={isOpen} onOpenChange={setIsOpen}>
  <CollapsibleTrigger asChild>
    <Button variant="ghost">
      Toggle
      <ChevronsUpDown className="h-4 w-4" />
    </Button>
  </CollapsibleTrigger>
  <CollapsibleContent>
    Hidden content goes here.
  </CollapsibleContent>
</Collapsible>

Accordion

Sheet