You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: fern/products/docs/pages/component-library/default-components/accordion-groups.mdx
+8-9Lines changed: 8 additions & 9 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -7,19 +7,18 @@ Accordion Groups allow you to organize content into collapsible sections, making
7
7
8
8
<AccordionGroup>
9
9
<Accordiontitle="Basic usage">
10
-
Accordion Groups can contain multiple Accordion items. Each Accordion has a title and content that can be expanded or collapsed.
10
+
Accordion Groups can contain multiple Accordion items. Each Accordion has a title and content that can be expanded or collapsed. You can use the `defaultOpen` prop to expand specific accordions by default when the page loads.
11
11
12
-
```
12
+
```jsx
13
13
<AccordionGroup>
14
-
<Accordion title="Section 1">
15
-
Content for section 1
14
+
<Accordion title="Section 1" defaultOpen={true}>
15
+
Content for section 1, expanded by default
16
16
</Accordion>
17
17
<Accordion title="Section 2">
18
18
Content for section 2
19
19
</Accordion>
20
20
</AccordionGroup>
21
21
```
22
-
23
22
</Accordion>
24
23
25
24
<Accordiontitle="Searchable content">
@@ -38,8 +37,8 @@ Accordion Groups allow you to organize content into collapsible sections, making
38
37
<Tabs>
39
38
<Tabtitle="Example">
40
39
<AccordionGroup>
41
-
<Accordiontitle="Simple text content">
42
-
This is a basic example with text content.
40
+
<Accordiontitle="Simple text content"defaultOpen={true}>
41
+
This is a basic example with text content. It's open by default when the page loads.
43
42
</Accordion>
44
43
<Accordiontitle="Text content with multimedia">
45
44
You can embed images, videos, and other media within accordions for rich interactive content.
@@ -69,8 +68,8 @@ Accordion Groups allow you to organize content into collapsible sections, making
69
68
<CodeBlock>
70
69
````jsx
71
70
<AccordionGroup>
72
-
<Accordion title="Simple text content">
73
-
This is a basic example with text content.
71
+
<Accordion title="Simple text content" defaultOpen={true}>
72
+
This is a basic example with text content.It's open by default when the page loads.
74
73
</Accordion>
75
74
<Accordion title="Text content with multimedia">
76
75
You can embed images, videos, and other media within accordions for rich interactive content.
Copy file name to clipboardExpand all lines: fern/products/docs/pages/component-library/default-components/accordions.mdx
+12-1Lines changed: 12 additions & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -6,16 +6,23 @@ description: 'Expand or collapse to reveal more information'
6
6
The Accordion component allows you to create expandable sections in your documentation. Content within accordions is searchable using browser search (cmd+f) even when collapsed. The component is optimized for SEO with server-side HTML generation, ensuring search engines can properly index all content within accordions.
7
7
8
8
<Tabs>
9
-
<Tabtitle="Example">
9
+
<Tabtitle="Examples">
10
10
<Accordiontitle='Single Accordion'>
11
11
This is an example of an accordion component. When clicked, it expands to reveal this additional content.
12
12
</Accordion>
13
+
<Accordiontitle='Accordion open by default'defaultOpen={true}>
14
+
You can use the `defaultOpen` property to have specific accordions expanded by default when the page loads. This is useful for highlighting important information or frequently accessed content.
15
+
</Accordion>
13
16
</Tab>
14
17
<Tabtitle="Markdown">
15
18
```jsx
16
19
<Accordion title='Single Accordion'>
17
20
This is an example of an accordion component. When clicked, it expands to reveal this additional content.
18
21
</Accordion>
22
+
23
+
<Accordion title='Accordion open by default' defaultOpen={true}>
24
+
You can use the `defaultOpen` property to have specific accordions expanded by default when the page loads. This is useful for highlighting important information or frequently accessed content.
25
+
</Accordion>
19
26
```
20
27
</Tab>
21
28
</Tabs>
@@ -30,4 +37,8 @@ The Accordion component allows you to create expandable sections in your documen
30
37
The content to be displayed when the accordion is expanded. Can include text, markdown, and components.
0 commit comments