Skip to Content
Patternfly Logo

Expandable section

ExamplesPropsCSS Variables

Examples

Basic

Uncontrolled

Uncontrolled with dynamic toggle text

Props

ExpandableSection properties
NameTypeRequiredDefaultDescription
childrenReact.ReactNodeYesContent rendered inside the Expandable Component
classNamestringNo''Additional classes added to the Expandable Component
isExpandedbooleanNoFlag to indicate if the content is expanded
toggleTextstringNo''Text that appears in the toggle
toggleTextExpandedstringNo''Text that appears in the toggle when expanded (will override toggleText if both are specified; used for uncontrolled expandable with dynamic toggle text)
toggleTextCollapsedstringNo''Text that appears in the toggle when collapsed (will override toggleText if both are specified; used for uncontrolled expandable with dynamic toggle text)
onToggle() => voidNo(): any => undefinedCallback function to toggle the expandable content
isActivebooleanNofalseForces active state

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