Skip to Content

Expandable section

ExamplesDocumentationCSS Variables

Examples

Hidden

Expanded

This content is visible only when the component is expanded.

Documentation

Accessibility

AttributeApplied toOutcome
aria-expanded="true".pf-c-expandable-section__toggleIndicates that the expandable section content is visible. Required
aria-expanded="false".pf-c-expandable-section__toggleIndicates the the expandable section content is hidden. Required
hidden.pf-c-expandable-section__contentIndicates that the expandable section content element is hidden. Use with aria-expanded="false" Required
aria-hidden="true".pf-c-expandable-section__toggle-iconHides the icon from screen readers. Required

Usage

ClassApplied toOutcome
.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-sectionModifies the component for the expanded state.
.pf-m-active.pf-c-expandable-section__toggleForces display of the active state of the toggle.

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--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--m-expanded__toggle-icon--Rotate
90deg
.pf-c-expandable-section--pf-c-expandable-section__content--MarginTop
1rem
.pf-c-expandable-section--pf-c-expandable-section__toggle-text--MarginLeft
calc(0.25rem + 0.5rem)
.pf-c-expandable-section.pf-m-expanded--pf-c-expandable-section__toggle--Color
#004080
.pf-c-expandable-section .pf-c-expandable-section__toggle:hover--pf-c-expandable-section__toggle--Color
#004080
.pf-c-expandable-section .pf-c-expandable-section__toggle:active--pf-c-expandable-section__toggle--Color
#004080
.pf-c-expandable-section .pf-c-expandable-section__toggle:focus--pf-c-expandable-section__toggle--Color
#004080