{ReStory}

Layout/Collapse: Basic

Collapsible content container
View fullscreen
Source Code
1export const Basic = component(() => (
2 ​<Stack direction="vertical" gap="lg">
3 ​ ​<Collapse
4 ​ ​ ​expanded
5 ​ ​ ​slots={{
6 ​ ​ ​ ​header: (
7 ​ ​ ​ ​ ​<CollapseHeader>
8 ​ ​ ​ ​ ​ ​<span>Expanded section</span>
9 ​ ​ ​ ​ ​ ​<Button variant="ghost" size="sm">↑</Button>
10 ​ ​ ​ ​ ​</CollapseHeader>
11 ​ ​ ​ ​),
12 ​ ​ ​}}
13 ​ ​>
14 ​ ​ ​<CollapseContent>
15 ​ ​ ​ ​<p>This content is visible</p>
16 ​ ​ ​ ​<p>You can put any content here</p>
17 ​ ​ ​</CollapseContent>
18 ​ ​</Collapse>
19
20 ​ ​<Collapse
21 ​ ​ ​slots={{
22 ​ ​ ​ ​header: (
23 ​ ​ ​ ​ ​<CollapseHeader>
24 ​ ​ ​ ​ ​ ​<span>Collapsed section</span>
25 ​ ​ ​ ​ ​ ​<Button variant="ghost" size="sm">↓</Button>
26 ​ ​ ​ ​ ​</CollapseHeader>
27 ​ ​ ​ ​),
28 ​ ​ ​}}
29 ​ ​>
30 ​ ​ ​<CollapseContent>
31 ​ ​ ​ ​<p>This content is hidden by default</p>
32 ​ ​ ​ ​<p>Click the header to show it</p>
33 ​ ​ ​</CollapseContent>
34 ​ ​</Collapse>
35 ​</Stack>
36));