Skip to content
Patternfly Logo

Expandable section

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.

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-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.

CSS variables

.pf-c-expandable-section--pf-c-expandable-section__toggle--PaddingTop
0.375rem
.pf-c-expandable-section--pf-c-expandable-section__toggle--PaddingRight
1rem
.pf-c-expandable-section--pf-c-expandable-section__toggle--PaddingBottom
0.375rem
.pf-c-expandable-section--pf-c-expandable-section__toggle--PaddingLeft
0
.pf-c-expandable-section--pf-c-expandable-section__toggle--Color
#06c
.pf-c-expandable-section--pf-c-expandable-section__toggle--hover--Color
#004080
.pf-c-expandable-section--pf-c-expandable-section__toggle--active--Color
#004080
.pf-c-expandable-section--pf-c-expandable-section__toggle--focus--Color
#004080
.pf-c-expandable-section--pf-c-expandable-section__toggle--m-expanded--Color
#004080
.pf-c-expandable-section--pf-c-expandable-section__toggle-icon--Color
#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--pf-c-expandable-section__content--MarginTop
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--pf-c-expandable-section--m-display-lg__toggle--PaddingTop
1rem
.pf-c-expandable-section--pf-c-expandable-section--m-display-lg__toggle--PaddingRight
1rem
.pf-c-expandable-section--pf-c-expandable-section--m-display-lg__toggle--PaddingBottom
1rem
.pf-c-expandable-section--pf-c-expandable-section--m-display-lg__toggle--PaddingLeft
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--pf-c-expandable-section--m-display-lg__content--PaddingBottom
1.5rem
.pf-c-expandable-section--pf-c-expandable-section--m-display-lg__content--PaddingLeft
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--pf-c-expandable-section--m-display-lg--m-expanded--after--BackgroundColor
#06c
.pf-c-expandable-section.pf-m-expanded--pf-c-expandable-section__toggle--Color
#004080
.pf-c-expandable-section.pf-m-expanded--pf-c-expandable-section__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.pf-m-expanded--pf-c-expandable-section--m-display-lg--after--BackgroundColor
#06c
.pf-c-expandable-section.pf-m-detached--pf-c-expandable-section__content--MarginTop
0
.pf-c-expandable-section.pf-m-limit-width--pf-c-expandable-section__content--MaxWidth
46.875rem
.pf-c-expandable-section.pf-m-display-lg--pf-c-expandable-section__toggle--PaddingTop
1rem
.pf-c-expandable-section.pf-m-display-lg--pf-c-expandable-section__toggle--PaddingRight
1rem
.pf-c-expandable-section.pf-m-display-lg--pf-c-expandable-section__toggle--PaddingBottom
1rem
.pf-c-expandable-section.pf-m-display-lg--pf-c-expandable-section__toggle--PaddingLeft
1rem
.pf-c-expandable-section.pf-m-display-lg--pf-c-expandable-section__content--PaddingRight
1.5rem
.pf-c-expandable-section.pf-m-display-lg--pf-c-expandable-section__content--PaddingBottom
1.5rem
.pf-c-expandable-section.pf-m-display-lg--pf-c-expandable-section__content--PaddingLeft
1.5rem
.pf-c-expandable-section.pf-m-display-lg--pf-c-expandable-section__content--MarginTop
0
.pf-c-expandable-section__toggle:hover--pf-c-expandable-section__toggle--Color
#004080
.pf-c-expandable-section__toggle:active--pf-c-expandable-section__toggle--Color
#004080
.pf-c-expandable-section__toggle:focus--pf-c-expandable-section__toggle--Color
#004080
.pf-c-expandable-section__toggle-icon.pf-m-expand-top--pf-c-expandable-section__toggle-icon--Rotate
0

View source on GitHub