Collapsible

1import {
2  Collapsible,
3  CollapsibleTrigger,
4  CollapsibleContent,
5} from "@ecos/ui";
6
7<Collapsible>
8  <CollapsibleTrigger>
9    Show Details
10  </CollapsibleTrigger>
11
12  <CollapsibleContent>
13    Additional content goes here.
14  </CollapsibleContent>
15</Collapsible>

1<Collapsible defaultOpen>
2  <CollapsibleTrigger>
3    Product Information
4  </CollapsibleTrigger>
5
6  <CollapsibleContent>
7    This content is visible when the page loads.
8  </CollapsibleContent>
9</Collapsible>

1const [open, setOpen] = React.useState(false);
2
3<Collapsible
4  open={open}
5  onOpenChange={setOpen}
6>
7  <CollapsibleTrigger>
8    Toggle Content
9  </CollapsibleTrigger>
10
11  <CollapsibleContent>
12    This collapsible is externally controlled.
13  </CollapsibleContent>
14</Collapsible>

1<Collapsible>
2  <CollapsibleTrigger>
3    Product Specifications
4  </CollapsibleTrigger>
5
6  <CollapsibleContent>
7    <div className="space-y-2">
8      <p>Material: Gold</p>
9      <p>Grade: 999.9</p>
10      <p>Finish: Polished</p>
11    </div>
12  </CollapsibleContent>
13</Collapsible>

1<Collapsible>
2  <CollapsibleTrigger>
3    Order Summary
4  </CollapsibleTrigger>
5
6  <CollapsibleContent>
7    <div className="space-y-4">
8      <p>Order Number: 12345</p>
9
10      <ul>
11        <li>Gold Sheet</li>
12        <li>Silver Wire</li>
13      </ul>
14    </div>
15  </CollapsibleContent>
16</Collapsible>

1<Collapsible>
2  <CollapsibleTrigger className="flex items-center justify-between w-full">
3    <span>Advanced Settings</span>
4    <ChevronDown />
5  </CollapsibleTrigger>
6
7  <CollapsibleContent>
8    Additional settings content.
9  </CollapsibleContent>
10</Collapsible>

1<Collapsible>
2  <CollapsibleTrigger>
3    Shipping Information
4  </CollapsibleTrigger>
5
6  <CollapsibleContent>
7    <Card>
8      <CardContent>
9        Delivery within 2-3 business days.
10      </CardContent>
11    </Card>
12  </CollapsibleContent>
13</Collapsible>