HTML

Expandable

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__toggleIndicates that the expandable content is visible. Required
aria-expanded="false".pf-c-expandable__toggleIndicates the the expandable content is hidden. Required
hidden.pf-c-expandable__contentIndicates that the expandable content element is hidden. Use with aria-expanded="false" Required
aria-hidden="true".pf-c-expandable__toggle-iconHides the icon from screen readers. Required

Usage

ClassApplied toOutcome
.pf-c-expandable<div>Initiates the expandable component. Required
.pf-c-expandable__toggle<button>Initiates the expandable toggle. Required
.pf-c-expandable__toggle-icon<i>Initiates the expandable toggle icon. Required
.pf-c-expandable__content<div>Initiates the expandable content section. Required
.pf-m-expanded.pf-c-expandableModifies the component for the expanded state.
.pf-m-hover.pf-c-expandable__toggleModifies the expandable toggle for the hoverable state.
.pf-m-active.pf-c-expandable__toggleModifies the expandable toggle for the active state.
.pf-m-focus.pf-c-expandable__toggleModifies the expandable toggle for the focus state.

CSS Variables

--pf-c-expandable__content--MarginTopc_expandable__content_MarginTop
1rem
--pf-c-expandable__toggle--active--Colorc_expandable__toggle_active_Color
#004080
--pf-c-expandable__toggle--Colorc_expandable__toggle_Color
#004080
--pf-c-expandable__toggle--focus--Colorc_expandable__toggle_focus_Color
#004080
--pf-c-expandable__toggle--FontWeightc_expandable__toggle_FontWeight
400
--pf-c-expandable__toggle--hover--Colorc_expandable__toggle_hover_Color
#004080
--pf-c-expandable__toggle-icon--Colorc_expandable__toggle_icon_Color
#151515
--pf-c-expandable__toggle-icon--MarginRightc_expandable__toggle_icon_MarginRight
0.5rem
--pf-c-expandable__toggle-icon--Transitionc_expandable__toggle_icon_Transition
.2s ease-in 0s
--pf-c-expandable__toggle--m-expanded--Colorc_expandable__toggle_m_expanded_Color
#004080
--pf-c-expandable__toggle--PaddingBottomc_expandable__toggle_PaddingBottom
0.375rem
--pf-c-expandable__toggle--PaddingLeftc_expandable__toggle_PaddingLeft
0
--pf-c-expandable__toggle--PaddingRightc_expandable__toggle_PaddingRight
1rem
--pf-c-expandable__toggle--PaddingTopc_expandable__toggle_PaddingTop
0.375rem
--pf-c-expandable--m-expanded__toggle-icon--Transformc_expandable_m_expanded__toggle_icon_Transform
rotate(90deg)