Collapsible

import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '@caroainc/ui-components/client'

<Collapsible>
  <CollapsibleTrigger asChild>
    <Button variant="outline">
      <Icon name="ChevronDown" />
      詳細を表示
    </Button>
  </CollapsibleTrigger>
  <CollapsibleContent>
    <div className="p-4 border rounded-md mt-2">
      折りたたまれていた内容がここに表示されます。
    </div>
  </CollapsibleContent>
</Collapsible>

<Collapsible defaultOpen>
  <CollapsibleTrigger asChild>
    <Button>{isOpen ? '閉じる' : '開く'}</Button>
  </CollapsibleTrigger>
  <CollapsibleContent>
    コンテンツ
  </CollapsibleContent>
</Collapsible>

<Collapsible className="border rounded-md">
  <CollapsibleTrigger asChild>
    <Button variant="ghost" className="w-full justify-between">
      <span>質問タイトル</span>
      <Icon name="ChevronDown" />
    </Button>
  </CollapsibleTrigger>
  <CollapsibleContent>
    <div className="px-4 pb-4">
      回答内容
    </div>
  </CollapsibleContent>
</Collapsible>

const [isOpen, setIsOpen] = useState(false)
 
<Collapsible open={isOpen} onOpenChange={setIsOpen}>
  <CollapsibleTrigger asChild>
    <Button>{isOpen ? '閉じる' : '開く'}</Button>
  </CollapsibleTrigger>
  <CollapsibleContent>
    コンテンツ
  </CollapsibleContent>
</Collapsible>