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
+4-23Lines changed: 4 additions & 23 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -6,13 +6,13 @@ description: 'Display expandable/collapsible options that reveal more informatio
6
6
Accordion Groups allow you to organize content into collapsible sections, making it easier for users to navigate through information. With recent updates, our Accordion component now supports improved search functionality using the browser's built-in search feature.
7
7
8
8
<AccordionGroup>
9
-
<Accordiontitle="Basic usage"defaultOpen={true}>
10
-
Accordion Groups can contain multiple Accordion items. Each item has a title and content that can be expanded or collapsed.
9
+
<Accordiontitle="Basic usage">
10
+
Accordion Groups can contain multiple Accordion items. Each item 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
@@ -28,31 +28,12 @@ Accordion Groups allow you to organize content into collapsible sections, making
28
28
<Accordiontitle="Accessibility">
29
29
Our Accordion component is built with accessibility in mind, supporting keyboard navigation and screen readers.
30
30
</Accordion>
31
-
32
-
<Accordiontitle="Default open state">
33
-
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.
The recent update to our Accordion component improves content discoverability by allowing users to search through all content, including collapsed sections, using the browser's search function (Cmd+F / Ctrl+F).
51
36
52
-
### Usage examples
53
-
54
-
Here are some examples of how to use the Accordion Group component:
Copy file name to clipboardExpand all lines: fern/products/docs/pages/component-library/default-components/accordions.mdx
+6-6Lines changed: 6 additions & 6 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -6,22 +6,22 @@ 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
-
This accordion is open by default using the `defaultOpen` property.
15
-
</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>
16
16
</Tab>
17
17
<Tabtitle="Markdown">
18
18
```jsx
19
19
<Accordion title='Single Accordion'>
20
20
This is an example of an accordion component. When clicked, it expands to reveal this additional content.
21
21
</Accordion>
22
22
23
-
<Accordion title='Accordion Open by Default' defaultOpen={true}>
24
-
This accordion is open by default using the `defaultOpen` property.
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.
0 commit comments