Collapsible

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

export function Example() {
  return (
    <Collapsible>
      <div className="flex items-center justify-between">
        <h4 className="font-medium">Details</h4>
        <CollapsibleTrigger asChild>
          <Button variant="outline" size="sm">Toggle</Button>
        </CollapsibleTrigger>
      </div>
      <CollapsibleContent className="mt-3 text-sm text-muted-foreground">
        Hidden content goes here.
      </CollapsibleContent>
    </Collapsible>
  );
}