Expandable section

Examples

Hidden

Expanded

This content is visible only when the component is expanded.

Documentation

Accessibility

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

Usage

Class	Applied to	Outcome
`.pf-c-expandable-section`	`<div>`	Initiates the expandable section component. Required
`.pf-c-expandable-section__toggle`	`<button>`	Initiates the expandable section toggle. Required
`.pf-c-expandable-section__toggle-text`	`<span>`	Initiates the expandable toggle text. Required
`.pf-c-expandable-section__toggle-icon`	`<span>`	Initiates the expandable toggle icon. Required
`.pf-c-expandable-section__content`	`<div>`	Initiates the expandable section content. Required
`.pf-m-expanded`	`.pf-c-expandable-section`	Modifies the component for the expanded state.

CSS Variables


	.pf-c-expandable-section	--pf-c-expandable-section__toggle--PaddingTop	0.375rem
--pf-c-expandable-section__toggle--PaddingTop --pf-global--spacer--form-element $pf-global--spacer--form-element pf-size-prem(6px) 0.375rem
	.pf-c-expandable-section	--pf-c-expandable-section__toggle--PaddingRight	1rem
--pf-c-expandable-section__toggle--PaddingRight --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-expandable-section	--pf-c-expandable-section__toggle--PaddingBottom	0.375rem
--pf-c-expandable-section__toggle--PaddingBottom --pf-global--spacer--form-element $pf-global--spacer--form-element pf-size-prem(6px) 0.375rem
	.pf-c-expandable-section	--pf-c-expandable-section__toggle--PaddingLeft	0
	.pf-c-expandable-section	--pf-c-expandable-section__toggle--FontWeight	500
--pf-c-expandable-section__toggle--FontWeight --pf-global--FontWeight--semi-bold $pf-global--FontWeight--semi-bold 500
	.pf-c-expandable-section	--pf-c-expandable-section__toggle--Color	#06c
--pf-c-expandable-section__toggle--Color --pf-global--link--Color $pf-global--link--Color $pf-global--primary-color--100 $pf-color-blue-400 #06c
	.pf-c-expandable-section	--pf-c-expandable-section__toggle--hover--Color	#004080
--pf-c-expandable-section__toggle--hover--Color --pf-global--link--Color--hover $pf-global--link--Color--hover $pf-global--primary-color--200 $pf-color-blue-500 #004080
	.pf-c-expandable-section	--pf-c-expandable-section__toggle--active--Color	#004080
--pf-c-expandable-section__toggle--active--Color --pf-global--link--Color--hover $pf-global--link--Color--hover $pf-global--primary-color--200 $pf-color-blue-500 #004080
	.pf-c-expandable-section	--pf-c-expandable-section__toggle--focus--Color	#004080
--pf-c-expandable-section__toggle--focus--Color --pf-global--link--Color--hover $pf-global--link--Color--hover $pf-global--primary-color--200 $pf-color-blue-500 #004080
	.pf-c-expandable-section	--pf-c-expandable-section__toggle--m-expanded--Color	#004080
--pf-c-expandable-section__toggle--m-expanded--Color --pf-global--link--Color--hover $pf-global--link--Color--hover $pf-global--primary-color--200 $pf-color-blue-500 #004080
	.pf-c-expandable-section	--pf-c-expandable-section__toggle-icon--Color	#151515
--pf-c-expandable-section__toggle-icon--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #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--Transform	rotate(90deg)
	.pf-c-expandable-section	--pf-c-expandable-section__content--MarginTop	1rem
--pf-c-expandable-section__content--MarginTop --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-expandable-section	--pf-c-expandable-section__toggle-text--MarginLeft	calc(0.25rem + 0.5rem)
--pf-c-expandable-section__toggle-text--MarginLeft calc(--pf-global--spacer--xs + --pf-global--spacer--sm) calc($pf-global--spacer--xs + $pf-global--spacer--sm) calc(pf-size-prem(4px) + pf-size-prem(8px)) calc(0.25rem + 0.5rem)
	.pf-c-expandable-section.pf-m-expanded	--pf-c-expandable-section__toggle--Color	#004080
--pf-c-expandable-section__toggle--Color --pf-c-expandable-section__toggle--m-expanded--Color --pf-global--link--Color--hover $pf-global--link--Color--hover $pf-global--primary-color--200 $pf-color-blue-500 #004080
	.pf-c-expandable-section .pf-c-expandable-section__toggle:hover	--pf-c-expandable-section__toggle--Color	#004080
--pf-c-expandable-section__toggle--Color --pf-c-expandable-section__toggle--hover--Color --pf-global--link--Color--hover $pf-global--link--Color--hover $pf-global--primary-color--200 $pf-color-blue-500 #004080
	.pf-c-expandable-section .pf-c-expandable-section__toggle:active	--pf-c-expandable-section__toggle--Color	#004080
--pf-c-expandable-section__toggle--Color --pf-c-expandable-section__toggle--active--Color --pf-global--link--Color--hover $pf-global--link--Color--hover $pf-global--primary-color--200 $pf-color-blue-500 #004080
	.pf-c-expandable-section .pf-c-expandable-section__toggle:focus	--pf-c-expandable-section__toggle--Color	#004080
--pf-c-expandable-section__toggle--Color --pf-c-expandable-section__toggle--focus--Color --pf-global--link--Color--hover $pf-global--link--Color--hover $pf-global--primary-color--200 $pf-color-blue-500 #004080
	.pf-m-redhat-font .pf-c-expandable-section__toggle	--pf-c-expandable-section__toggle--FontWeight	400
--pf-c-expandable-section__toggle--FontWeight --pf-global--FontWeight--normal $pf-global--FontWeight--normal 400