Collapsible

단일 콘텐츠 블록을 펼치고 접습니다.

데모

최근 활동 3건

이재현 님이 문서를 수정했습니다.

코드

<Collapsible>
  <div className="flex items-center justify-between">
    <p>최근 활동 3건</p>
    <CollapsibleTrigger asChild>
      <Button variant="ghost" size="sm">더 보기</Button>
    </CollapsibleTrigger>
  </div>
  <p>이재현 님이 문서를 수정했습니다.</p>
  <CollapsibleContent>
    <p>최유진 님이 댓글을 남겼습니다.</p>
    <p>정민수 님이 리뷰를 요청했습니다.</p>
  </CollapsibleContent>
</Collapsible>

사용 규칙

콘텐츠 블록 하나를 펼치고 접는 단일 토글에 사용한다 — 여러 섹션이면 Accordion을 쓴다.
CollapsibleTrigger는 asChild로 Button 등 실제 인터랙티브 요소와 결합한다.

Don't

트리거 없이 CollapsibleContent만 노출해 사용자가 펼치는 방법을 알 수 없게 하지 않는다.
항상 펼쳐져 있어야 하는 핵심 정보를 CollapsibleContent 뒤에 숨기지 않는다.