Collapsible

#Installation & usage

Use it to keep secondary content out of the way until someone asks for it: advanced settings, the rest of a long list, details under a summary. For a stack of sections, use an Accordion. For content that should float over the page instead of pushing it down, use a Popover.

import { Button, Collapsible, CollapsibleChevron, CollapsibleContent, CollapsibleTrigger } from '@youj/react'

export function AdvancedSettings() {
  return (
    <Collapsible>
      <CollapsibleTrigger render={<Button variant="ghost" size="sm" />}>
        Advanced settings
        <CollapsibleChevron />
      </CollapsibleTrigger>
      <CollapsibleContent>
        <div className="pt-3">…</div>
      </CollapsibleContent>
    </Collapsible>
  )
}

CollapsibleTrigger renders a plain button by default. Compose it with any button through render, as in the Demo story, and it keeps its look while gaining the disclosure behavior. Pass defaultOpen to start open, or open and onOpenChange to control it.

#The chevron

CollapsibleChevron is Youj's chevron icon, turned over while its trigger is expanded. It reads aria-expanded from the nearest trigger around it, so it works in any disclosure without wiring: a collapsible, an accordion, a navigation menu or a sidebar group, including triggers composed through render. It mounts in its real state, so an open section doesn't turn over on first paint. size sets it in pixels.

<CollapsibleTrigger>
  Filters
  <CollapsibleChevron size={14} className="text-fg-muted" />
</CollapsibleTrigger>

#Description

#Code