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: packages/documentation-site/patternfly-docs/content/design-guidelines/components/expandable-section/expandable-section.md
+16-5Lines changed: 16 additions & 5 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -12,16 +12,28 @@ An expandable section has two main elements.
12
12

13
13
</div>
14
14
15
-
1.**Caret:** Indicates whether the section is expanded or collapsed.
15
+
1.**Toggle (fa-angle-right ):** Indicates whether the section is expanded or collapsed.
16
16
2.**Toggle text:** Informs the user what will be shown when the component is expanded.
17
17
18
18
## Usage
19
-
Use an expandable section when you want to hide optional or advanced content by default. They are commonly used in forms to reveal plain text or additional form fields. They can also be used to reveal [charts](https://v4-archive.patternfly.org/v4/charts/about), [cards](https://v4-archive.patternfly.org/v4/components/card), [data lists](https://v4-archive.patternfly.org/v4/components/data-list), or [table views](https://v4-archive.patternfly.org/v4/components/table). Expandable sections may be used in [alerts](https://v4-archive.patternfly.org/v4/components/alert) to show additional information.
19
+
Use an expandable section when you want to hide optional or advanced content by default. They are commonly used in forms to reveal plain text or additional form fields. They can also be used to reveal [charts](https://v4-archive.patternfly.org/v4/charts/about), [cards](https://v4-archive.patternfly.org/v4/components/card), [data lists](https://v4-archive.patternfly.org/v4/components/data-list), or [table views](https://v4-archive.patternfly.org/v4/components/table). Expandable sections can also be used in [alerts](https://v4-archive.patternfly.org/v4/components/alert) to show additional information.
20
20
21
-
We recommend using the dynamic toggle text when designing with the expandable section. Dynamic toggle text will update based on the state of the expandable section. For example, it may read **Show more** when the toggle is collapsed, and **Show less** when the toggle is open.
21
+
We recommend using dynamic toggle text for an expandable section, which will update the toggle text based on the state of the expandable section. For example, it may read **Show more** when the toggle is collapsed, and **Show less** when the toggle is open.
22
22
23
23
## Variations
24
24
25
+
### Expandable section disclosure
26
+
27
+
<divclass="ws-docs-content-img">
28
+

29
+
</div>
30
+
31
+
### Expandable section for truncated text
32
+
33
+
<divclass="ws-docs-content-img">
34
+

35
+
</div>
36
+
25
37
### Expandable section in a form
26
38
27
39
<divclass="ws-docs-content-img">
@@ -46,5 +58,4 @@ We recommend using the dynamic toggle text when designing with the expandable se
46
58

47
59
</div>
48
60
49
-
50
-
For more information regarding accessibility, visit the [expandable section accessibility tab](https://v4-archive.patternfly.org/v4/components/expandable-section/accessibility).
61
+
For more information regarding accessibility, visit the [expandable section accessibility tab](/components/expandable-section/accessibility).
Copy file name to clipboardExpand all lines: packages/documentation-site/patternfly-docs/content/design-guidelines/components/expandable-section/img/exp-sect-disclosure.svg
Copy file name to clipboardExpand all lines: packages/documentation-site/patternfly-docs/content/design-guidelines/components/expandable-section/img/exp-sect-truncate.svg
0 commit comments