Expandable section

HTML

Examples

Hidden

Expanded

This content is visible only when the component is expanded.

Disclosure variation (hidden)

Disclosure variation (expanded)

This content is visible only when the component is expanded.

Detached toggle

This content is visible only when the component is expanded.

Indented

This content is visible only when the component is expanded.

Truncate expansion

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus finibus, diam vitae eleifend consequat, metus sapien posuere quam, ut tincidunt nunc enim eget sapien. Mauris ac dui imperdiet dolor dignissim efficitur laoreet quis erat. Proin turpis leo, malesuada eget urna et, tristique mollis odio. Ut mattis nulla lorem, elementum hendrerit nunc molestie vitae. Proin massa sem, bibendum id urna in, viverra porta neque. Ut ut mi ac lacus rhoncus mollis id quis sem. Suspendisse non justo elementum, dictum eros nec, hendrerit sapien. Mauris aliquet, est sit amet tincidunt vehicula, purus est hendrerit arcu, vitae egestas odio lorem ut lacus. In et neque non metus viverra rhoncus quis non purus. Integer id venenatis tortor. Nulla sollicitudin convallis tellus, at porta eros volutpat in. Curabitur rhoncus rhoncus nisi, sit amet tincidunt dolor efficitur vitae. Integer purus neque, porta non odio lobortis, accumsan elementum risus. Pellentesque viverra id lacus a cursus. Etiam eu pulvinar risus. Etiam ultrices nec urna id consequat.

Truncate expansion 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
`aria-controls="[id of content element]"`	`.pf-c-expandable-section.pf-m-detached .pf-c-expandable-section__toggle`	Identifies the element controlled by the toggle button. Required
`id`	`.pf-c-expandable-section.pf-m-detached .pf-c-expandable-section__content`	Gives the content an `id` for use with `aria-controls` on `.pf-c-expandable-section__toggle`. 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.
`.pf-m-display-lg`	`.pf-c-expandable-section`	Modifies the styling of the component to have large display styling.
`.pf-m-detached`	`.pf-c-expandable-section`	Indicates that the expandable section toggle and content are detached from one another, so you can move them around independently in the markup.
`.pf-m-indented`	`.pf-c-expandable-section`	Indicates that the expandable section content is indented and is aligned with the start of the title text to provide visual hierarchy.
`.pf-m-truncate`	`.pf-c-expandable-section`	Indicates that the expandable section content is truncated by default, and not truncated when expanded.
`.pf-m-active`	`.pf-c-expandable-section__toggle`	Forces display of the active state of the toggle.
`.pf-m-expand-top`	`.pf-c-expandable-section__toggle-icon`	Modifies the toggle icon to point up when expanded.
`--pf-c-expandable-section--m-truncate__content--LineClamp`	`.pf-c-expandable-section.pf-m-truncate`	Modifies the number of lines to show before truncating.

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--MarginTop	0
	.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--MinWidth	1em
	.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__toggle-icon--Rotate	0
	.pf-c-expandable-section	--pf-c-expandable-section__toggle-icon--m-expand-top--Rotate	0
	.pf-c-expandable-section	--pf-c-expandable-section--m-expanded__toggle-icon--Rotate	90deg
	.pf-c-expandable-section	--pf-c-expandable-section--m-expanded__toggle-icon--m-expand-top--Rotate	-90deg
	.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-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__content--MaxWidth	auto
	.pf-c-expandable-section	--pf-c-expandable-section--m-limit-width__content--MaxWidth	46.875rem
	.pf-c-expandable-section	--pf-c-expandable-section--m-display-lg--BoxShadow	0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06)
--pf-c-expandable-section--m-display-lg--BoxShadow --pf-global--BoxShadow--md $pf-global--BoxShadow--md 0 pf-size-prem(4px) pf-size-prem(8px) pf-size-prem(0) rgba($pf-color-black-1000, .12), 0 0 pf-size-prem(4px) 0 rgba($pf-color-black-1000, .06) 0 pf-size-prem(4px) pf-size-prem(8px) pf-size-prem(0) rgba(#030303, .12), 0 0 pf-size-prem(4px) 0 rgba(#030303, .06) 0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06)
	.pf-c-expandable-section	--pf-c-expandable-section--m-display-lg__toggle--PaddingTop	1rem
--pf-c-expandable-section--m-display-lg__toggle--PaddingTop --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-expandable-section	--pf-c-expandable-section--m-display-lg__toggle--PaddingRight	1rem
--pf-c-expandable-section--m-display-lg__toggle--PaddingRight --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-expandable-section	--pf-c-expandable-section--m-display-lg__toggle--PaddingBottom	1rem
--pf-c-expandable-section--m-display-lg__toggle--PaddingBottom --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-expandable-section	--pf-c-expandable-section--m-display-lg__toggle--PaddingLeft	1rem
--pf-c-expandable-section--m-display-lg__toggle--PaddingLeft --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-expandable-section	--pf-c-expandable-section--m-display-lg__content--MarginTop	0
	.pf-c-expandable-section	--pf-c-expandable-section--m-display-lg__content--PaddingRight	1.5rem
--pf-c-expandable-section--m-display-lg__content--PaddingRight --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-expandable-section	--pf-c-expandable-section--m-display-lg__content--PaddingBottom	1.5rem
--pf-c-expandable-section--m-display-lg__content--PaddingBottom --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-expandable-section	--pf-c-expandable-section--m-display-lg__content--PaddingLeft	1.5rem
--pf-c-expandable-section--m-display-lg__content--PaddingLeft --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-expandable-section	--pf-c-expandable-section--m-display-lg--after--BackgroundColor	transparent
	.pf-c-expandable-section	--pf-c-expandable-section--m-display-lg--after--Width	3px
--pf-c-expandable-section--m-display-lg--after--Width --pf-global--BorderWidth--lg $pf-global--BorderWidth--lg 3px
	.pf-c-expandable-section	--pf-c-expandable-section--m-display-lg--m-expanded--after--BackgroundColor	#06c
--pf-c-expandable-section--m-display-lg--m-expanded--after--BackgroundColor --pf-global--primary-color--100 $pf-global--primary-color--100 $pf-color-blue-400 #06c
	.pf-c-expandable-section	--pf-c-expandable-section--m-indented__content--PaddingLeft	calc(calc(0.25rem + 0.5rem) + 1em)
--pf-c-expandable-section--m-indented__content--PaddingLeft calc(--pf-c-expandable-section__toggle-text--MarginLeft + --pf-c-expandable-section__toggle-icon--MinWidth) calc(calc(--pf-global--spacer--xs + --pf-global--spacer--sm) + 1em) calc(calc($pf-global--spacer--xs + $pf-global--spacer--sm) + 1em) calc(calc(pf-size-prem(4px) + pf-size-prem(8px)) + 1em) calc(calc(0.25rem + 0.5rem) + 1em)
	.pf-c-expandable-section	--pf-c-expandable-section--m-truncate__content--LineClamp	3
	.pf-c-expandable-section	--pf-c-expandable-section--m-truncate__toggle--MarginTop	0.25rem
--pf-c-expandable-section--m-truncate__toggle--MarginTop --pf-global--spacer--xs $pf-global--spacer--xs pf-size-prem(4px) 0.25rem
	.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-m-expanded	--pf-c-expandable-section__toggle-icon--Rotate	90deg
--pf-c-expandable-section__toggle-icon--Rotate --pf-c-expandable-section--m-expanded__toggle-icon--Rotate 90deg
	.pf-c-expandable-section.pf-m-expanded	--pf-c-expandable-section__toggle-icon--m-expand-top--Rotate	-90deg
--pf-c-expandable-section__toggle-icon--m-expand-top--Rotate --pf-c-expandable-section--m-expanded__toggle-icon--m-expand-top--Rotate -90deg
	.pf-c-expandable-section.pf-m-expanded	--pf-c-expandable-section--m-display-lg--after--BackgroundColor	#06c
--pf-c-expandable-section--m-display-lg--after--BackgroundColor --pf-c-expandable-section--m-display-lg--m-expanded--after--BackgroundColor --pf-global--primary-color--100 $pf-global--primary-color--100 $pf-color-blue-400 #06c
	.pf-c-expandable-section.pf-m-detached	--pf-c-expandable-section__content--MarginTop	0
	.pf-c-expandable-section.pf-m-detached	--pf-c-expandable-section--m-truncate__toggle--MarginTop	0
	.pf-c-expandable-section.pf-m-limit-width	--pf-c-expandable-section__content--MaxWidth	46.875rem
--pf-c-expandable-section__content--MaxWidth --pf-c-expandable-section--m-limit-width__content--MaxWidth 46.875rem
	.pf-c-expandable-section.pf-m-display-lg	--pf-c-expandable-section__toggle--PaddingTop	1rem
--pf-c-expandable-section__toggle--PaddingTop --pf-c-expandable-section--m-display-lg__toggle--PaddingTop --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-expandable-section.pf-m-display-lg	--pf-c-expandable-section__toggle--PaddingRight	1rem
--pf-c-expandable-section__toggle--PaddingRight --pf-c-expandable-section--m-display-lg__toggle--PaddingRight --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-expandable-section.pf-m-display-lg	--pf-c-expandable-section__toggle--PaddingBottom	1rem
--pf-c-expandable-section__toggle--PaddingBottom --pf-c-expandable-section--m-display-lg__toggle--PaddingBottom --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-expandable-section.pf-m-display-lg	--pf-c-expandable-section__toggle--PaddingLeft	1rem
--pf-c-expandable-section__toggle--PaddingLeft --pf-c-expandable-section--m-display-lg__toggle--PaddingLeft --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-expandable-section.pf-m-display-lg	--pf-c-expandable-section__content--PaddingRight	1.5rem
--pf-c-expandable-section__content--PaddingRight --pf-c-expandable-section--m-display-lg__content--PaddingRight --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-expandable-section.pf-m-display-lg	--pf-c-expandable-section__content--PaddingBottom	1.5rem
--pf-c-expandable-section__content--PaddingBottom --pf-c-expandable-section--m-display-lg__content--PaddingBottom --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-expandable-section.pf-m-display-lg	--pf-c-expandable-section__content--PaddingLeft	1.5rem
--pf-c-expandable-section__content--PaddingLeft --pf-c-expandable-section--m-display-lg__content--PaddingLeft --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-expandable-section.pf-m-display-lg	--pf-c-expandable-section__content--MarginTop	0
--pf-c-expandable-section__content--MarginTop --pf-c-expandable-section--m-display-lg__content--MarginTop 0
	.pf-c-expandable-section.pf-m-indented	--pf-c-expandable-section__content--PaddingLeft	calc(calc(0.25rem + 0.5rem) + 1em)
--pf-c-expandable-section__content--PaddingLeft --pf-c-expandable-section--m-indented__content--PaddingLeft calc(--pf-c-expandable-section__toggle-text--MarginLeft + --pf-c-expandable-section__toggle-icon--MinWidth) calc(calc(--pf-global--spacer--xs + --pf-global--spacer--sm) + 1em) calc(calc($pf-global--spacer--xs + $pf-global--spacer--sm) + 1em) calc(calc(pf-size-prem(4px) + pf-size-prem(8px)) + 1em) calc(calc(0.25rem + 0.5rem) + 1em)
	.pf-c-expandable-section.pf-m-truncate	--pf-c-expandable-section__toggle--MarginTop	0.25rem
--pf-c-expandable-section__toggle--MarginTop --pf-c-expandable-section--m-truncate__toggle--MarginTop --pf-global--spacer--xs $pf-global--spacer--xs pf-size-prem(4px) 0.25rem
	.pf-c-expandable-section.pf-m-truncate	--pf-c-expandable-section__toggle--PaddingTop	0
	.pf-c-expandable-section.pf-m-truncate	--pf-c-expandable-section__toggle--PaddingRight	0
	.pf-c-expandable-section.pf-m-truncate	--pf-c-expandable-section__toggle--PaddingBottom	0
	.pf-c-expandable-section.pf-m-truncate	--pf-c-expandable-section__toggle-text--MarginLeft	0
	.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__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__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-c-expandable-section__toggle-icon.pf-m-expand-top	--pf-c-expandable-section__toggle-icon--Rotate	0
--pf-c-expandable-section__toggle-icon--Rotate --pf-c-expandable-section__toggle-icon--m-expand-top--Rotate 0

View source on GitHub