Skip to content
PatternFly

Expandable section

An expandable section component is used to support progressive disclosure in a form or page by hiding additional content when you don't want it to be shown by default. An expandable section can contain any type of content such as plain text, form inputs, and charts.

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

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.

Documentation

Accessibility

Attribute
Applied to
Outcome
aria-expanded="true"
.pf-v5-c-expandable-section__toggle
Indicates that the expandable section content is visible. Required
aria-expanded="false"
.pf-v5-c-expandable-section__toggle
Indicates the the expandable section content is hidden. Required
hidden
.pf-v5-c-expandable-section__content
Indicates that the expandable section content element is hidden. Use with aria-expanded="false" Required
aria-hidden="true"
.pf-v5-c-expandable-section__toggle-icon
Hides the icon from screen readers. Required
aria-controls="[id of content element]"
.pf-v5-c-expandable-section.pf-m-detached .pf-v5-c-expandable-section__toggle
Identifies the element controlled by the toggle button. Required
id
.pf-v5-c-expandable-section.pf-m-detached .pf-v5-c-expandable-section__content
Gives the content an id for use with aria-controls on .pf-v5-c-expandable-section__toggle. Required

Usage

Class
Applied to
Outcome
.pf-v5-c-expandable-section
<div>
Initiates the expandable section component. Required
.pf-v5-c-expandable-section__toggle
<button>
Initiates the expandable section toggle. Required
.pf-v5-c-expandable-section__toggle-text
<span>
Initiates the expandable toggle text. Required
.pf-v5-c-expandable-section__toggle-icon
<span>
Initiates the expandable toggle icon. Required
.pf-v5-c-expandable-section__content
<div>
Initiates the expandable section content. Required
.pf-m-expanded
.pf-v5-c-expandable-section
Modifies the component for the expanded state.
.pf-m-display-lg
.pf-v5-c-expandable-section
Modifies the styling of the component to have large display styling.
.pf-m-detached
.pf-v5-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-v5-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-v5-c-expandable-section
Indicates that the expandable section content is truncated by default, and not truncated when expanded.
.pf-m-active
.pf-v5-c-expandable-section__toggle
Forces display of the active state of the toggle.
.pf-m-expand-top
.pf-v5-c-expandable-section__toggle-icon
Modifies the toggle icon to point up when expanded.
--pf-v5-c-expandable-section--m-truncate__content--LineClamp
.pf-v5-c-expandable-section.pf-m-truncate
Modifies the number of lines to show before truncating.

CSS variables

Expand or collapse columnSelectorVariableValue
.pf-v5-c-expandable-section--pf-v5-c-expandable-section__toggle--PaddingTop
0.375rem
.pf-v5-c-expandable-section--pf-v5-c-expandable-section__toggle--PaddingRight
1rem
.pf-v5-c-expandable-section--pf-v5-c-expandable-section__toggle--PaddingBottom
0.375rem
.pf-v5-c-expandable-section--pf-v5-c-expandable-section__toggle--PaddingLeft
0
.pf-v5-c-expandable-section--pf-v5-c-expandable-section__toggle--MarginTop
0
.pf-v5-c-expandable-section--pf-v5-c-expandable-section__toggle--Color
#06c
.pf-v5-c-expandable-section--pf-v5-c-expandable-section__toggle--hover--Color
#004080
.pf-v5-c-expandable-section--pf-v5-c-expandable-section__toggle--active--Color
#004080
.pf-v5-c-expandable-section--pf-v5-c-expandable-section__toggle--focus--Color
#004080
.pf-v5-c-expandable-section--pf-v5-c-expandable-section__toggle--m-expanded--Color
#004080
.pf-v5-c-expandable-section--pf-v5-c-expandable-section__toggle--BackgroundColor
transparent
.pf-v5-c-expandable-section--pf-v5-c-expandable-section__toggle-icon--MinWidth
1em
.pf-v5-c-expandable-section--pf-v5-c-expandable-section__toggle-icon--Color
#151515
.pf-v5-c-expandable-section--pf-v5-c-expandable-section__toggle-icon--Transition
.2s ease-in 0s
.pf-v5-c-expandable-section--pf-v5-c-expandable-section__toggle-icon--Rotate
0
.pf-v5-c-expandable-section--pf-v5-c-expandable-section__toggle-icon--m-expand-top--Rotate
0
.pf-v5-c-expandable-section--pf-v5-c-expandable-section--m-expanded__toggle-icon--Rotate
90deg
.pf-v5-c-expandable-section--pf-v5-c-expandable-section--m-expanded__toggle-icon--m-expand-top--Rotate
-90deg
.pf-v5-c-expandable-section--pf-v5-c-expandable-section__toggle-text--MarginLeft
calc(0.25rem + 0.5rem)
.pf-v5-c-expandable-section--pf-v5-c-expandable-section__content--MarginTop
1rem
.pf-v5-c-expandable-section--pf-v5-c-expandable-section__content--MaxWidth
auto
.pf-v5-c-expandable-section--pf-v5-c-expandable-section--m-limit-width__content--MaxWidth
46.875rem
.pf-v5-c-expandable-section--pf-v5-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-v5-c-expandable-section--pf-v5-c-expandable-section--m-display-lg__toggle--PaddingTop
1rem
.pf-v5-c-expandable-section--pf-v5-c-expandable-section--m-display-lg__toggle--PaddingRight
1rem
.pf-v5-c-expandable-section--pf-v5-c-expandable-section--m-display-lg__toggle--PaddingBottom
1rem
.pf-v5-c-expandable-section--pf-v5-c-expandable-section--m-display-lg__toggle--PaddingLeft
1rem
.pf-v5-c-expandable-section--pf-v5-c-expandable-section--m-display-lg__content--MarginTop
0
.pf-v5-c-expandable-section--pf-v5-c-expandable-section--m-display-lg__content--PaddingRight
1.5rem
.pf-v5-c-expandable-section--pf-v5-c-expandable-section--m-display-lg__content--PaddingBottom
1.5rem
.pf-v5-c-expandable-section--pf-v5-c-expandable-section--m-display-lg__content--PaddingLeft
1.5rem
.pf-v5-c-expandable-section--pf-v5-c-expandable-section--m-display-lg--after--BackgroundColor
transparent
.pf-v5-c-expandable-section--pf-v5-c-expandable-section--m-display-lg--after--Width
3px
.pf-v5-c-expandable-section--pf-v5-c-expandable-section--m-display-lg--m-expanded--after--BackgroundColor
#06c
.pf-v5-c-expandable-section--pf-v5-c-expandable-section--m-indented__content--PaddingLeft
calc(calc(0.25rem + 0.5rem) + 1em)
.pf-v5-c-expandable-section--pf-v5-c-expandable-section--m-truncate__content--LineClamp
3
.pf-v5-c-expandable-section--pf-v5-c-expandable-section--m-truncate__toggle--MarginTop
0.25rem
.pf-v5-c-expandable-section.pf-m-expanded--pf-v5-c-expandable-section__toggle--Color
#004080
.pf-v5-c-expandable-section.pf-m-expanded--pf-v5-c-expandable-section__toggle-icon--Rotate
90deg
.pf-v5-c-expandable-section.pf-m-expanded--pf-v5-c-expandable-section__toggle-icon--m-expand-top--Rotate
-90deg
.pf-v5-c-expandable-section.pf-m-expanded--pf-v5-c-expandable-section--m-display-lg--after--BackgroundColor
#06c
.pf-v5-c-expandable-section.pf-m-detached--pf-v5-c-expandable-section__content--MarginTop
0
.pf-v5-c-expandable-section.pf-m-detached--pf-v5-c-expandable-section--m-truncate__toggle--MarginTop
0
.pf-v5-c-expandable-section.pf-m-limit-width--pf-v5-c-expandable-section__content--MaxWidth
46.875rem
.pf-v5-c-expandable-section.pf-m-display-lg--pf-v5-c-expandable-section__toggle--PaddingTop
1rem
.pf-v5-c-expandable-section.pf-m-display-lg--pf-v5-c-expandable-section__toggle--PaddingRight
1rem
.pf-v5-c-expandable-section.pf-m-display-lg--pf-v5-c-expandable-section__toggle--PaddingBottom
1rem
.pf-v5-c-expandable-section.pf-m-display-lg--pf-v5-c-expandable-section__toggle--PaddingLeft
1rem
.pf-v5-c-expandable-section.pf-m-display-lg--pf-v5-c-expandable-section__content--PaddingRight
1.5rem
.pf-v5-c-expandable-section.pf-m-display-lg--pf-v5-c-expandable-section__content--PaddingBottom
1.5rem
.pf-v5-c-expandable-section.pf-m-display-lg--pf-v5-c-expandable-section__content--PaddingLeft
1.5rem
.pf-v5-c-expandable-section.pf-m-display-lg--pf-v5-c-expandable-section__content--MarginTop
0
.pf-v5-c-expandable-section.pf-m-indented--pf-v5-c-expandable-section__content--PaddingLeft
calc(calc(0.25rem + 0.5rem) + 1em)
.pf-v5-c-expandable-section.pf-m-truncate--pf-v5-c-expandable-section__toggle--MarginTop
0.25rem
.pf-v5-c-expandable-section.pf-m-truncate--pf-v5-c-expandable-section__toggle--PaddingTop
0
.pf-v5-c-expandable-section.pf-m-truncate--pf-v5-c-expandable-section__toggle--PaddingRight
0
.pf-v5-c-expandable-section.pf-m-truncate--pf-v5-c-expandable-section__toggle--PaddingBottom
0
.pf-v5-c-expandable-section.pf-m-truncate--pf-v5-c-expandable-section__toggle-text--MarginLeft
0
.pf-v5-c-expandable-section__toggle:hover--pf-v5-c-expandable-section__toggle--Color
#004080
.pf-v5-c-expandable-section__toggle:active--pf-v5-c-expandable-section__toggle--Color
#004080
.pf-v5-c-expandable-section__toggle:focus--pf-v5-c-expandable-section__toggle--Color
#004080
.pf-v5-c-expandable-section__toggle-icon.pf-m-expand-top--pf-v5-c-expandable-section__toggle-icon--Rotate
0

View source on GitHub
Red Hat
Copyright © 2014-2024 Red Hat, Inc.
Privacy statementTerms of useAll policies and guidelines