1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
|
---
id: Expandable section
section: components
cssPrefix: pf-v6-c-expandable-section
---## Examples
### Hidden
```html
<div class="pf-v6-c-expandable-section">
<div class="pf-v6-c-expandable-section__toggle">
<button
class="pf-v6-c-button pf-m-link"
id="hidden-toggle"
type="button"
aria-expanded="false"
aria-controls="hidden-content"
>
<span class="pf-v6-c-button__icon pf-m-start">
<span class="pf-v6-c-expandable-section__toggle-icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
</span>
<span class="pf-v6-c-button__text">Show more hidden example content</span>
</button>
</div>
<div
class="pf-v6-c-expandable-section__content"
hidden
id="hidden-content"
role="region"
aria-labelledby="hidden-toggle"
>This content is visible only when the component is expanded.</div>
</div>
```
### Expanded
```html
<div class="pf-v6-c-expandable-section pf-m-expanded">
<div class="pf-v6-c-expandable-section__toggle">
<button
class="pf-v6-c-button pf-m-link"
id="expanded-toggle"
type="button"
aria-expanded="true"
aria-controls="expanded-content"
>
<span class="pf-v6-c-button__icon pf-m-start">
<span class="pf-v6-c-expandable-section__toggle-icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
</span>
<span class="pf-v6-c-button__text">Show less expanded example content</span>
</button>
</div>
<div
class="pf-v6-c-expandable-section__content"
id="expanded-content"
role="region"
aria-labelledby="expanded-toggle"
>This content is visible only when the component is expanded.</div>
</div>
```
### Indented
```html
<div class="pf-v6-c-expandable-section pf-m-expanded pf-m-indented">
<div class="pf-v6-c-expandable-section__toggle">
<button
class="pf-v6-c-button pf-m-link"
id="indented-toggle"
type="button"
aria-expanded="true"
aria-controls="indented-content"
>
<span class="pf-v6-c-button__icon pf-m-start">
<span class="pf-v6-c-expandable-section__toggle-icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
</span>
<span class="pf-v6-c-button__text">Show less indented example content</span>
</button>
</div>
<div
class="pf-v6-c-expandable-section__content"
id="indented-content"
role="region"
aria-labelledby="indented-toggle"
>This content is visible only when the component is expanded.</div>
</div>
```
### Disclosure variation (hidden)
```html
<div class="pf-v6-c-expandable-section pf-m-display-lg pf-m-limit-width">
<div class="pf-v6-c-expandable-section__toggle">
<button
class="pf-v6-c-button pf-m-link"
id="disclosure-variation-hidden-toggle"
type="button"
aria-expanded="false"
aria-controls="disclosure-variation-hidden-content"
>
<span class="pf-v6-c-button__icon pf-m-start">
<span class="pf-v6-c-expandable-section__toggle-icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
</span>
<span
class="pf-v6-c-button__text"
>Show more disclosure variation example content</span>
</button>
</div>
<div
class="pf-v6-c-expandable-section__content"
hidden
id="disclosure-variation-hidden-content"
role="region"
aria-labelledby="disclosure-variation-hidden-toggle"
>This content is visible only when the component is expanded.</div>
</div>
```
### Disclosure variation (expanded)
```html
<div
class="pf-v6-c-expandable-section pf-m-expanded pf-m-display-lg pf-m-limit-width"
>
<div class="pf-v6-c-expandable-section__toggle">
<button
class="pf-v6-c-button pf-m-link"
id="disclosure-variation-expanded-toggle"
type="button"
aria-expanded="true"
aria-controls="disclosure-variation-expanded-content"
>
<span class="pf-v6-c-button__icon pf-m-start">
<span class="pf-v6-c-expandable-section__toggle-icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
</span>
<span
class="pf-v6-c-button__text"
>Show less disclosure variation example content</span>
</button>
</div>
<div
class="pf-v6-c-expandable-section__content"
id="disclosure-variation-expanded-content"
role="region"
aria-labelledby="disclosure-variation-expanded-toggle"
>This content is visible only when the component is expanded.</div>
</div>
```
### Disclosure variation (indented)
```html
<div
class="pf-v6-c-expandable-section pf-m-expanded pf-m-display-lg pf-m-limit-width pf-m-indented"
>
<div class="pf-v6-c-expandable-section__toggle">
<button
class="pf-v6-c-button pf-m-link"
id="disclosure-variation-indented-toggle"
type="button"
aria-expanded="true"
aria-controls="disclosure-variation-indented-content"
>
<span class="pf-v6-c-button__icon pf-m-start">
<span class="pf-v6-c-expandable-section__toggle-icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
</span>
<span
class="pf-v6-c-button__text"
>Show less disclosure variation indented example content</span>
</button>
</div>
<div
class="pf-v6-c-expandable-section__content"
id="disclosure-variation-indented-content"
role="region"
aria-labelledby="disclosure-variation-indented-toggle"
>This content is visible only when the component is expanded.</div>
</div>
```
### Detached
```html
<div class="pf-v6-l-stack pf-m-gutter">
<div class="pf-v6-l-stack__item">
<div
class="pf-v6-c-expandable-section pf-m-expanded pf-m-detached pf-m-expand-top"
>
<div
class="pf-v6-c-expandable-section__content"
id="detached-toggle-content"
role="region"
aria-labelledby="detached-toggle-toggle"
>This content is visible only when the component is expanded.</div>
</div>
</div>
<div class="pf-v6-l-stack__item">
<div
class="pf-v6-c-expandable-section pf-m-expanded pf-m-detached pf-m-expand-top"
>
<div class="pf-v6-c-expandable-section__toggle">
<button
class="pf-v6-c-button pf-m-link"
id="detached-toggle-toggle"
type="button"
aria-expanded="true"
aria-controls="detached-toggle-content"
>
<span class="pf-v6-c-button__icon pf-m-start">
<span class="pf-v6-c-expandable-section__toggle-icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
</span>
<span class="pf-v6-c-button__text">Show less detached example content</span>
</button>
</div>
</div>
</div>
</div>
```
### Truncate expansion (hidden)
```html
<div class="pf-v6-c-expandable-section pf-m-truncate">
<div
class="pf-v6-c-expandable-section__content"
id="truncated-expansion-hidden-content"
role="region"
aria-labelledby="truncated-expansion-hidden-toggle"
>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus finibus, diam vitae eleifend consequat, metus sapien posuere quam, ut tincidunt nunc enim eget sapien. Mauris ac dui imperdiet dolor dignissim efficitur laoreet quis erat. Proin turpis leo, malesuada eget urna et, tristique mollis odio. Ut mattis nulla lorem, elementum hendrerit nunc molestie vitae. Proin massa sem, bibendum id urna in, viverra porta neque. Ut ut mi ac lacus rhoncus mollis id quis sem. Suspendisse non justo elementum, dictum eros nec, hendrerit sapien. Mauris aliquet, est sit amet tincidunt vehicula, purus est hendrerit arcu, vitae egestas odio lorem ut lacus. In et neque non metus viverra rhoncus quis non purus. Integer id venenatis tortor. Nulla sollicitudin convallis tellus, at porta eros volutpat in. Curabitur rhoncus rhoncus nisi, sit amet tincidunt dolor efficitur vitae. Integer purus neque, porta non odio lobortis, accumsan elementum risus. Pellentesque viverra id lacus a cursus. Etiam eu pulvinar risus. Etiam ultrices nec urna id consequat.</div>
<div class="pf-v6-c-expandable-section__toggle">
<button
class="pf-v6-c-button pf-m-inline pf-m-link"
id="truncated-expansion-hidden-toggle"
type="button"
aria-expanded="false"
aria-controls="truncated-expansion-hidden-content"
>
<span class="pf-v6-c-button__text">Show more truncated content</span>
</button>
</div>
</div>
```
### Truncate expansion (expanded)
```html
<div class="pf-v6-c-expandable-section pf-m-expanded pf-m-truncate">
<div
class="pf-v6-c-expandable-section__content"
id="truncate-expansion-expanded-content"
role="region"
aria-labelledby="truncate-expansion-expanded-toggle"
>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus finibus, diam vitae eleifend consequat, metus sapien posuere quam, ut tincidunt nunc enim eget sapien. Mauris ac dui imperdiet dolor dignissim efficitur laoreet quis erat. Proin turpis leo, malesuada eget urna et, tristique mollis odio. Ut mattis nulla lorem, elementum hendrerit nunc molestie vitae. Proin massa sem, bibendum id urna in, viverra porta neque. Ut ut mi ac lacus rhoncus mollis id quis sem. Suspendisse non justo elementum, dictum eros nec, hendrerit sapien. Mauris aliquet, est sit amet tincidunt vehicula, purus est hendrerit arcu, vitae egestas odio lorem ut lacus. In et neque non metus viverra rhoncus quis non purus. Integer id venenatis tortor. Nulla sollicitudin convallis tellus, at porta eros volutpat in. Curabitur rhoncus rhoncus nisi, sit amet tincidunt dolor efficitur vitae. Integer purus neque, porta non odio lobortis, accumsan elementum risus. Pellentesque viverra id lacus a cursus. Etiam eu pulvinar risus. Etiam ultrices nec urna id consequat.</div>
<div class="pf-v6-c-expandable-section__toggle">
<button
class="pf-v6-c-button pf-m-inline pf-m-link"
id="truncate-expansion-expanded-toggle"
type="button"
aria-expanded="true"
aria-controls="truncate-expansion-expanded-content"
>
<span class="pf-v6-c-button__text">Show less truncated content</span>
</button>
</div>
</div>
```
## Documentation
### Accessibility
| Attribute | Applied to | Outcome |
| -- | -- | -- |
| `aria-expanded="true"` | `.pf-v6-c-expandable-section__toggle .pf-v6-c-button` | Indicates that the expandable section content is visible. **Required** |
| `aria-expanded="false"` | `.pf-v6-c-expandable-section__toggle .pf-v6-c-button` | Indicates the the expandable section content is hidden. **Required** |
| `hidden` | `.pf-v6-c-expandable-section__content` | Indicates that the expandable section content element is hidden. Use with `aria-expanded="false"` **Required** |
| `aria-hidden="true"` | `.pf-v6-c-expandable-section__toggle-icon` | Hides the icon from screen readers. **Required** |
| `aria-controls="[id of content element]"` | `.pf-v6-c-expandable-section.pf-m-detached .pf-v6-c-expandable-section__toggle .pf-v6-c-button` | Identifies the element controlled by the toggle button. **Required** |
| `id` | `.pf-v6-c-expandable-section.pf-m-detached .pf-v6-c-expandable-section__content` | Gives the content an `id` for use with `aria-controls` on `.pf-v6-c-expandable-section__toggle .pf-v6-c-button`. **Required** |
### Usage
| Class | Applied to | Outcome |
| -- | -- | -- |
| `.pf-v6-c-expandable-section` | `<div>` | Initiates the expandable section component. **Required** |
| `.pf-v6-c-expandable-section__toggle` | `<div>` | Initiates the expandable toggle wrapper. **Required** |
| `.pf-v6-c-expandable-section__toggle-icon` | `<span>` | Initiates the expandable toggle icon. **Required** |
| `.pf-v6-c-expandable-section__content` | `<div>` | Initiates the expandable section content. **Required** |
| `.pf-m-expanded` | `.pf-v6-c-expandable-section` | Modifies the component for the expanded state. |
| `.pf-m-detached` | `.pf-v6-c-expandable-section` | Modifies the component for a detached variant. |
| `.pf-m-expand-top` | `.pf-v6-c-expandable-section__toggle-icon` | Modifies the toggle icon to point up when expanded. We recommend the new method of applying this class directly to the `.pf-v6-c-expandable-section` wrapper element. |
| `.pf-m-expand-top` | `.pf-v6-c-expandable-section.pf-m-detached` | Modifies the expandable animation and icon rotation directions for detached expandable sections. **Required** when the content is above the toggle. |
| `.pf-m-expand-bottom` | `.pf-v6-c-expandable-section.pf-m-detached` | Modifies the expandable animation direction for detached expandable sections. **Required** when the content is below the toggle. |
| `.pf-m-display-lg` | `.pf-v6-c-expandable-section` | Modifies the styling of the component to have large display styling. |
| `.pf-m-indented` | `.pf-v6-c-expandable-section` | Indicates that the expandable section content is indented and is aligned with the start of the title text to provide visual hierarchy. |
| `.pf-m-truncate` | `.pf-v6-c-expandable-section` | Indicates that the expandable section content is truncated by default, and not truncated when expanded. |
| `--pf-v6-c-expandable-section--m-truncate__content--LineClamp` | `.pf-v6-c-expandable-section.pf-m-truncate` | Modifies the number of lines to show before truncating. |
|
