HTML

Expandable

ExamplesDocumentationCSS variables

Examples

Hidden example

Copied to clipboard

Expanded example

Copied to clipboard

Documentation

Accessibility

Attribute Applied to Outcome
aria-expanded="true" .pf-c-expandable__toggle Indicates that the expandable content is visible. Required
aria-expanded="false" .pf-c-expandable__toggle Indicates the the expandable content is hidden. Required
hidden .pf-c-expandable__content Indicates that the expandable content element is hidden. Use with aria-expanded="false" Required
aria-hidden="true" .pf-c-expandable__toggle-icon Hides the icon from screen readers. Required

Usage

Class Applied to Outcome
.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-expandable Modifies the component for the expanded state.
.pf-m-hover .pf-c-expandable__toggle Modifies the expandable toggle for the hoverable state.
.pf-m-active .pf-c-expandable__toggle Modifies the expandable toggle for the active state.
.pf-m-focus .pf-c-expandable__toggle Modifies the expandable toggle for the focus state.

CSS variables

--pf-c-expandable__content--MarginTopc_expandable__content_MarginTop1rem
--pf-c-expandable__toggle--Colorc_expandable__toggle_Color#004080
--pf-c-expandable__toggle--FontWeightc_expandable__toggle_FontWeight400
--pf-c-expandable__toggle--PaddingBottomc_expandable__toggle_PaddingBottom0.375rem
--pf-c-expandable__toggle--PaddingLeftc_expandable__toggle_PaddingLeft0
--pf-c-expandable__toggle--PaddingRightc_expandable__toggle_PaddingRight1rem
--pf-c-expandable__toggle--PaddingTopc_expandable__toggle_PaddingTop0.375rem
--pf-c-expandable__toggle--active--Colorc_expandable__toggle_active_Color#004080
--pf-c-expandable__toggle--focus--Colorc_expandable__toggle_focus_Color#004080
--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_MarginRight0.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--m-expanded__toggle-icon--Transformc_expandable_m_expanded__toggle_icon_Transformrotate(90deg)