HTML

Expandable

The expandable component is used to embed an expandable section within a form when you don’t want controls or information to be shown by default. This may be used to hide advanced features, for example. Related design guidelines: Forms

ExamplesDocumentationCSS Variables

Examples

Hidden example

Copied to clipboard

Expanded example

This content is visible only when the component is expanded.
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_FontWeight500
--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--m-expanded--Colorc_expandable__toggle_m_expanded_Color#004080