Skip to content
PF-HorizontalLogo-Color

Accordion

An accordion is an interactive container that expands and collapses to hide or reveal nested content. It takes advantage of progressive disclosure to help reduce page scrolling, by allowing users to choose whether they want to show or hide more detailed information as needed.

Examples

Definition list

Vivamus et tortor sed arcu congue vehicula eget et diam. Praesent nec dictum lorem. Aliquam id diam ultrices, faucibus erat id, maximus nunc.

Single expand behavior

Vivamus et tortor sed arcu congue vehicula eget et diam. Praesent nec dictum lorem. Aliquam id diam ultrices, faucibus erat id, maximus nunc.

Fixed with multiple expand behavior

Donec vel posuere orci. Phasellus quis tortor a ex hendrerit efficitur. Aliquam lacinia ligula pharetra, sagittis ex ut, pellentesque diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum ultricies nulla nibh. Etiam vel dui fermentum ligula ullamcorper eleifend non quis tortor. Morbi tempus ornare tempus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris et velit neque. Donec ultricies condimentum mauris, pellentesque imperdiet libero convallis convallis. Aliquam erat volutpat. Donec rutrum semper tempus. Proin dictum imperdiet nibh, quis dapibus nulla. Integer sed tincidunt lectus, sit amet auctor eros.

Donec vel posuere orci. Phasellus quis tortor a ex hendrerit efficitur. Aliquam lacinia ligula pharetra, sagittis ex ut, pellentesque diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum ultricies nulla nibh. Etiam vel dui fermentum ligula ullamcorper eleifend non quis tortor. Morbi tempus ornare tempus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris et velit neque. Donec ultricies condimentum mauris, pellentesque imperdiet libero convallis convallis. Aliquam erat volutpat. Donec rutrum semper tempus. Proin dictum imperdiet nibh, quis dapibus nulla. Integer sed tincidunt lectus, sit amet auctor eros.

Bordered

Donec vel posuere orci. Phasellus quis tortor a ex hendrerit efficitur. Aliquam lacinia ligula pharetra, sagittis ex ut, pellentesque diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum ultricies nulla nibh. Etiam vel dui fermentum ligula ullamcorper eleifend non quis tortor. Morbi tempus ornare tempus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris et velit neque. Donec ultricies condimentum mauris, pellentesque imperdiet libero convallis convallis. Aliquam erat volutpat. Donec rutrum semper tempus. Proin dictum imperdiet nibh, quis dapibus nulla. Integer sed tincidunt lectus, sit amet auctor eros.

Toggle icon at start

Vivamus et tortor sed arcu congue vehicula eget et diam. Praesent nec dictum lorem. Aliquam id diam ultrices, faucibus erat id, maximus nunc.

Props

Accordion

*required
NameTypeDefaultDescription
aria-labelstringAdds accessible text to the Accordion
asDefinitionListbooleantrueFlag to indicate whether use definition list or div
childrenReact.ReactNodenullContent rendered inside the Accordion
classNamestring''Additional classes added to the Accordion
displaySize'default' | 'lg''default'Display size variant.
headingLevel'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6''h3'Heading level to use
isBorderedbooleanfalseFlag to indicate the accordion had a border
togglePosition'start' | 'end''end'Sets the toggle icon position for all accordion toggles.

AccordionItem

*required
NameTypeDefaultDescription
childrenReact.ReactNodenullContent rendered inside the accordion item.
classNamestringAdditional classes added to the accordion item.
isExpandedbooleanfalseFlag to indicate whether the accordion item is expanded.

AccordionContent

*required
NameTypeDefaultDescription
aria-labelstring''Adds accessible text to the Accordion content
aria-labelledbystringId of the controlling accordion toggle to label the content.
childrenReact.ReactNodenullContent rendered inside the Accordion
classNamestring''Additional classes added to the Accordion content
componentReact.ElementTypeComponent to use as content container
idstring''Identify the AccordionContent item
isCustomContentReact.ReactNodefalseFlag indicating content is custom. Expanded content Body wrapper will be removed from children. This allows multiple bodies to be rendered as content.
isFixedbooleanfalseFlag to indicate Accordion content is fixed

AccordionToggle

*required
NameTypeDefaultDescription
idrequiredstringIdentify the Accordion toggle number
childrenReact.ReactNodenullContent rendered inside the Accordion toggle
classNamestring''Additional classes added to the Accordion Toggle
componentReact.ElementTypeContainer to override the default for toggle

AccordionExpandableContentBody

*required
NameTypeDefaultDescription
childrenReact.ReactNodenullContent rendered inside the accordion content body

CSS variables

Expand or collapse columnSelectorVariableValue

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