danielroe.dev
[READ-ONLY] Mirror of https://github.com/danielroe/ripple-framework. Ripple is the presentation layer for building websites on the DPC Single Digital Presence platform.
Update 5.accordion.md
author
jodwyerdpc
committer
GitHub
date
(Apr 12, 2023, 9:58 PM +1000)
commit
54381878
543818787c427f9aa92cf9e1d56080bf32d7ef81
parent
1fc0ac69
1fc0ac69858d6969964216a75570fc7c9791d1bb
+57
-3
+57
-3
docs/content/design-system/5.components/5.accordion.md
+57
-3
docs/content/design-system/5.components/5.accordion.md
···
19
19
20
20
Always test accordions with users first. Depending on what the user needs, hiding content could present problems.
21
21
22
+
::DocsExample
23
+
---
24
+
id: core-containers-accordion--accordion
25
+
---
26
+
::
27
+
22
28
### When and how to use
23
29
- Fill the entire width of the content area.
24
30
- Embed into the body content area of any landing page.
···
27
33
- Use to conceal content that may only apply to specific users who can choose to show or hide content.
28
34
- Make sure accordion headings are descriptive and succinct.
29
35
30
-
###
31
-
- Never use a single accordion.
32
-
- Avoid put all page content into accordions.
36
+
### When and how not to use
37
+
- Never use a single accordion.
38
+
- Avoid putting all page content into accordions.
33
39
- Don't use accordions for important information all users need to read.
34
40
- Putting accordions in accordions can confuse the user.
35
41
- Don't use an accordion if doing so will slow the page load time.
36
42
- Don't disable sections.
43
+
44
+
### Collapse all/Expand all
45
+
Being able to collapse or expand all lets users open or close all accordions with one click. This reduces the amount of clicks required to reach their content.
46
+
47
+
Don't use this feature to help users find information. Expanding all accordions at once could defeat the purpose of having them. If a user has to do this, consider more descriptive titles.
48
+
49
+
The other option is to remove the accordions and display the content without them.
50
+
51
+
---
52
+
53
+
## Variants
54
+
The accordion component has two variants:
55
+
- Default.
56
+
- Numbered.
57
+
58
+
### Default
59
+
60
+
::DocsExample
61
+
---
62
+
id: core-containers-accordion--accordion
63
+
---
64
+
::
65
+
66
+
### Numbered
67
+
Use the 'numbered' variant when it is important the content is read in sequential order.
68
+
69
+
::DocsExample
70
+
---
71
+
id: core-containers-accordion--accordion&args=numbered:true
72
+
---
73
+
::
74
+
75
+
---
76
+
77
+
## Theming
78
+
Accordions use colour to:
79
+
- represent interactions such as hover and active states
80
+
- give prominence to the active displayed content section.
81
+
82
+
::DocsThemeChooser
83
+
::DocsExample
84
+
---
85
+
id: core-containers-accordion--accordion
86
+
---
87
+
::
88
+
::
89
+
90
+
To create your own theme, see theming guidance for designers or theming guidance for developers.