Patternfly Logo

Examples

Basic

Uncontrolled

Uncontrolled with dynamic toggle text

Props

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

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__toggle-icon--Rotate
0
.pf-c-expandable-section--pf-c-expandable-section--m-expanded__toggle-icon--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-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__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

View source on GitHub