Examples
Documentation
Accessibility
Attribute | Applied to | Outcome |
|---|---|---|
aria-expanded="true" | .pf-c-expandable-section__toggle | Indicates that the expandable section content is visible. Required |
aria-expanded="false" | .pf-c-expandable-section__toggle | Indicates the the expandable section content is hidden. Required |
hidden | .pf-c-expandable-section__content | Indicates that the expandable section content element is hidden. Use with aria-expanded="false" Required |
aria-hidden="true" | .pf-c-expandable-section__toggle-icon | Hides the icon from screen readers. Required |
aria-controls="[id of content element]" | .pf-c-expandable-section.pf-m-detached .pf-c-expandable-section__toggle | Identifies the element controlled by the toggle button. Required |
id | .pf-c-expandable-section.pf-m-detached .pf-c-expandable-section__content | Gives the content an id for use with aria-controls on .pf-c-expandable-section__toggle. Required |
Usage
Class | Applied to | Outcome |
|---|---|---|
.pf-c-expandable-section | <div> | Initiates the expandable section component. Required |
.pf-c-expandable-section__toggle | <button> | Initiates the expandable section toggle. Required |
.pf-c-expandable-section__toggle-text | <span> | Initiates the expandable toggle text. Required |
.pf-c-expandable-section__toggle-icon | <span> | Initiates the expandable toggle icon. Required |
.pf-c-expandable-section__content | <div> | Initiates the expandable section content. Required |
.pf-m-expanded | .pf-c-expandable-section | Modifies the component for the expanded state. |
.pf-m-display-lg | .pf-c-expandable-section | Modifies the styling of the component to have large display styling. |
.pf-m-detached | .pf-c-expandable-section | Indicates that the expandable section toggle and content are detached from one another, so you can move them around independently in the markup. |
.pf-m-indented | .pf-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-active | .pf-c-expandable-section__toggle | Forces display of the active state of the toggle. |
.pf-m-expand-top | .pf-c-expandable-section__toggle-icon | Modifies the toggle icon to point up when expanded. |
CSS variables
| .pf-c-expandable-section | --pf-c-expandable-section__toggle--PaddingTop | 0.375rem | |
| .pf-c-expandable-section | --pf-c-expandable-section__toggle--PaddingRight | 1rem | |
| .pf-c-expandable-section | --pf-c-expandable-section__toggle--PaddingBottom | 0.375rem | |
| .pf-c-expandable-section | --pf-c-expandable-section__toggle--PaddingLeft | 0 | |
| .pf-c-expandable-section | --pf-c-expandable-section__toggle--Color | #06c | |
| .pf-c-expandable-section | --pf-c-expandable-section__toggle--hover--Color | #004080 | |
| .pf-c-expandable-section | --pf-c-expandable-section__toggle--active--Color | #004080 | |
| .pf-c-expandable-section | --pf-c-expandable-section__toggle--focus--Color | #004080 | |
| .pf-c-expandable-section | --pf-c-expandable-section__toggle--m-expanded--Color | #004080 | |
| .pf-c-expandable-section | --pf-c-expandable-section__toggle-icon--MinWidth | 1em | |
| .pf-c-expandable-section | --pf-c-expandable-section__toggle-icon--Color | #151515 | |
| .pf-c-expandable-section | --pf-c-expandable-section__toggle-icon--Transition | .2s ease-in 0s | |
| .pf-c-expandable-section | --pf-c-expandable-section__toggle-icon--Rotate | 0 | |
| .pf-c-expandable-section | --pf-c-expandable-section__toggle-icon--m-expand-top--Rotate | 0 | |
| .pf-c-expandable-section | --pf-c-expandable-section--m-expanded__toggle-icon--Rotate | 90deg | |
| .pf-c-expandable-section | --pf-c-expandable-section--m-expanded__toggle-icon--m-expand-top--Rotate | -90deg | |
| .pf-c-expandable-section | --pf-c-expandable-section__toggle-text--MarginLeft | calc(0.25rem + 0.5rem) | |
| .pf-c-expandable-section | --pf-c-expandable-section__content--MarginTop | 1rem | |
| .pf-c-expandable-section | --pf-c-expandable-section__content--MaxWidth | auto | |
| .pf-c-expandable-section | --pf-c-expandable-section--m-limit-width__content--MaxWidth | 46.875rem | |
| .pf-c-expandable-section | --pf-c-expandable-section--m-display-lg--BoxShadow | 0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06) | |
| .pf-c-expandable-section | --pf-c-expandable-section--m-display-lg__toggle--PaddingTop | 1rem | |
| .pf-c-expandable-section | --pf-c-expandable-section--m-display-lg__toggle--PaddingRight | 1rem | |
| .pf-c-expandable-section | --pf-c-expandable-section--m-display-lg__toggle--PaddingBottom | 1rem | |
| .pf-c-expandable-section | --pf-c-expandable-section--m-display-lg__toggle--PaddingLeft | 1rem | |
| .pf-c-expandable-section | --pf-c-expandable-section--m-display-lg__content--MarginTop | 0 | |
| .pf-c-expandable-section | --pf-c-expandable-section--m-display-lg__content--PaddingRight | 1.5rem | |
| .pf-c-expandable-section | --pf-c-expandable-section--m-display-lg__content--PaddingBottom | 1.5rem | |
| .pf-c-expandable-section | --pf-c-expandable-section--m-display-lg__content--PaddingLeft | 1.5rem | |
| .pf-c-expandable-section | --pf-c-expandable-section--m-display-lg--after--BackgroundColor | transparent | |
| .pf-c-expandable-section | --pf-c-expandable-section--m-display-lg--after--Width | 3px | |
| .pf-c-expandable-section | --pf-c-expandable-section--m-display-lg--m-expanded--after--BackgroundColor | #06c | |
| .pf-c-expandable-section | --pf-c-expandable-section--m-indented__content--PaddingLeft | calc(calc(0.25rem + 0.5rem) + 1em) | |
| .pf-c-expandable-section.pf-m-expanded | --pf-c-expandable-section__toggle--Color | #004080 | |
| .pf-c-expandable-section.pf-m-expanded | --pf-c-expandable-section__toggle-icon--Rotate | 90deg | |
| .pf-c-expandable-section.pf-m-expanded | --pf-c-expandable-section__toggle-icon--m-expand-top--Rotate | -90deg | |
| .pf-c-expandable-section.pf-m-expanded | --pf-c-expandable-section--m-display-lg--after--BackgroundColor | #06c | |
| .pf-c-expandable-section.pf-m-detached | --pf-c-expandable-section__content--MarginTop | 0 | |
| .pf-c-expandable-section.pf-m-limit-width | --pf-c-expandable-section__content--MaxWidth | 46.875rem | |
| .pf-c-expandable-section.pf-m-display-lg | --pf-c-expandable-section__toggle--PaddingTop | 1rem | |
| .pf-c-expandable-section.pf-m-display-lg | --pf-c-expandable-section__toggle--PaddingRight | 1rem | |
| .pf-c-expandable-section.pf-m-display-lg | --pf-c-expandable-section__toggle--PaddingBottom | 1rem | |
| .pf-c-expandable-section.pf-m-display-lg | --pf-c-expandable-section__toggle--PaddingLeft | 1rem | |
| .pf-c-expandable-section.pf-m-display-lg | --pf-c-expandable-section__content--PaddingRight | 1.5rem | |
| .pf-c-expandable-section.pf-m-display-lg | --pf-c-expandable-section__content--PaddingBottom | 1.5rem | |
| .pf-c-expandable-section.pf-m-display-lg | --pf-c-expandable-section__content--PaddingLeft | 1.5rem | |
| .pf-c-expandable-section.pf-m-display-lg | --pf-c-expandable-section__content--MarginTop | 0 | |
| .pf-c-expandable-section.pf-m-indented | --pf-c-expandable-section__content--PaddingLeft | calc(calc(0.25rem + 0.5rem) + 1em) | |
| .pf-c-expandable-section__toggle:hover | --pf-c-expandable-section__toggle--Color | #004080 | |
| .pf-c-expandable-section__toggle:active | --pf-c-expandable-section__toggle--Color | #004080 | |
| .pf-c-expandable-section__toggle:focus | --pf-c-expandable-section__toggle--Color | #004080 | |
| .pf-c-expandable-section__toggle-icon.pf-m-expand-top | --pf-c-expandable-section__toggle-icon--Rotate | 0 | |
View source on GitHub
