Skip to main content Home About the Design SystemRoadmap OverviewDesignersDevelopers OverviewColorGridIconographyInteractionsSpacingTypography Overview Global colorBox shadowTypographyBorderOpacitySpaceLengthIconBreakpointsMedia queries All elements Accordion Alert Announcement Audio player Avatar Back to top Badge Blockquote Breadcrumb Button Card Chip Code block Call to action Dialog Disclosure Footer Health index Icon Jump links Menu dropdown Navigation link Navigation (primary) Navigation (secondary) Navigation (vertical) Pagination PopoverPlanned Progress stepper Scheme toggle Site status Skeleton Skip link Spinner Statistic Subnavigation Surface Switch Table Tabs Tag Tile Timestamp Tooltip Video embed OverviewColor PalettesCustomizingDevelopers All PatternsAccordionCall to ActionCardFilterFormLink with iconLogo wallSearch barSticky bannerSticky cardTabsTagTile All Personalization PatternsAnnouncement FundamentalsAccessibility toolsAssistive technologiesCI/CDContentContributorsDesignDevelopmentManual testingResourcesScreen readers Design/code status Release notes Get support

Accordion

OverviewStyleGuidelinesCodeAccessibilityDemos
ImportingUsagerh-accordionUsage guidelinesrh-accordion-headerrh-accordion-panelUsage guidelinesImportingUsagerh-accordionUsage guidelinesrh-accordion-headerrh-accordion-panelUsage guidelines

Importing

Add rh-accordion to your page with this import statement:

<script type="module">
  import '@rhds/elements/rh-accordion/rh-accordion.js';
</script>
Copy to Clipboard Wrap lines

To learn more about installing RHDS elements on your site using an import map read our getting started docs.

Usage 

<rh-accordion>
  <!-- H2 tags will be removed on upgrade, rh-accordion-header will set the correct heading level internally using the header tag that wraps it -->
  <h2><rh-accordion-header>Item One</rh-accordion-header></h2>
  <rh-accordion-panel>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </rh-accordion-panel>
  <h2><rh-accordion-header>Item Two</rh-accordion-header></h2>
  <rh-accordion-panel>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </rh-accordion-panel>
  <h2><rh-accordion-header>Item Three</rh-accordion-header></h2>
  <rh-accordion-panel>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </rh-accordion-panel>
</rh-accordion>

<script type="module">
  import '@rhds/elements/rh-accordion/rh-accordion.js';
</script>
Copy to Clipboard Wrap lines

rh-accordion

An accordion is a stacked list of panels which allows users to expand or collapse information when selected. They feature panels that consist of a section text label and a caret icon that collapses or expands to reveal more information.

Slots 1
Slot Name Summary Description
[default]

Place the rh-accordion-header and rh-accordion-panel elements here.
Note: [default] unnamed slots do not have a slot="name" attribute.
Attributes 5
Attribute DOM Property Description Type Default
accents undefined 
unknown
 
inline
accents accents

Positions the accent slot content relative to the panel's title. The accent slot contains secondary information such as tags, badges, or other small elements.

  • inline (default) - Accents appear on the same line as the title
  • bottom - Accents appear below the title

Usage guidelines

  • Use inline when accents are brief and horizontal space permits for both title and accents
  • Use bottom when you have multiple accent elements or need more horizontal space for the title text
  • Accent content represents secondary, supplementary information to the title
 
'inline' | 'bottom'
 
unknown
large large

If this accordion uses large styles

 
boolean
 
false
color-palette colorPalette

Color Palette for this accordion.

 
ColorPalette
 
unknown
expanded-index expandedIndex

Sets and reflects the currently expanded accordion 0-based indexes. Use commas to separate multiple indexes.

<rh-accordion expanded-index="1,2">
...
</rh-accordion>
 
unknown
 
unknown
Methods 7
Method Name Description
hasChanged()
updateAccessibility()

Initialize the accordion by connecting headers and panels with aria controls and labels; set up the default disclosure state if not set by the author; and check the URL for default open
toggle(index: number)

Accepts a 0-based index value (integer) for the set of accordion items to expand or collapse.
expand(index: number, parentAccordion: RhAccordion)

Accepts a 0-based index value (integer) for the set of accordion items to expand. Accepts an optional parent accordion to search for headers and panels.
expandAll()

Expands all accordion items.
collapse(index: number)

Accepts a 0-based index value (integer) for the set of accordion items to collapse.
collapseAll()

Collapses all accordion items.
Events 2
Event Name Description
expand

when a panel expands
collapse

when a panel collapses
CSS Shadow Parts 0
None
CSS Custom Properties 0
None
Design Tokens 8
Token Summary Copy
--rh-color-text-primary
--rh-color-surface-lightest
--rh-color-surface-darkest
--rh-color-surface
--rh-font-size-body-text-md
--rh-font-size-body-text-lg
--rh-color-border-subtle
--rh-box-shadow-sm

rh-accordion-header

Accordion Header We expect the light DOM of the rh-accordion-header to be a heading level tag (h1, h2, h3, h4, h5, h6)

Slots 2
Slot Name Summary Description
[default]

panel's title text or heading content

Contains the primary label that describes what content will be revealed when the panel expands. Title text should be written concisely (max 65 characters) so users know what to expect. Avoid writing titles that sound like calls to action - make it easy for users to understand the content within. Title text that is too long should be broken into separate sections, and text that is too vague may not help users understand the panel content.

@see Title text in Guidelines documentation
Note: [default] unnamed slots do not have a slot="name" attribute.
accents

decorations like icons or tags

These elements will appear inline by default with the header title, between the header and the chevron (or after the chevron and header in disclosure mode). There is an option to set the accents placement to bottom
Attributes 1
Attribute DOM Property Description Type Default
expanded expanded 
boolean
 
false
Methods 0
None
Events 1
Event Name Description
change

when the open panels change
CSS Shadow Parts 2
Part Name Summary Description
text

inline element containing the heading text or slotted heading content
accents

container for accents within the header
CSS Custom Properties 0
None
Design Tokens 13
Token Summary Copy
--rh-space-lg
--rh-space-xl
--rh-border-width-sm
--rh-color-border-subtle
--rh-font-family-body-text
--rh-color-surface-lighter
--rh-color-surface-dark
--rh-color-text-primary
--rh-color-interactive-primary-default
--rh-border-width-lg
--rh-color-accent-brand
--rh-font-weight-body-text-medium
--rh-space-md

rh-accordion-panel

Accordion Panel

Slots 1
Slot Name Summary Description
[default]

The content of the accordion panel can be any basic markup including but not limited to div, paragraph, or nested accordion panels.
Note: [default] unnamed slots do not have a slot="name" attribute.
Attributes 1
Attribute DOM Property Description Type Default
expanded expanded

Sets the initial visibility state of the panel content. When true, the panel is expanded and its content is visible. When false (default), the panel is collapsed and its content is hidden.

Usage guidelines

  • Use to draw attention to important content that should be immediately visible
  • Set on the first panel in a FAQ or help section to show the most common question
  • Supports multiple panels being expanded simultaneously for content comparison
  • Users can expand and collapse panels one at a time by default, or multiple panels when implementing "Expand all" functionality

By default, all panels are collapsed (expanded=false). Users expand panels by clicking the header, which animates the caret icon and reveals the content.

 
boolean
 
false
Methods 0
None
Events 0
None
CSS Shadow Parts 1
Part Name Summary Description
container

main wrapper region that contains the panel content

The container part represents the structural element that holds the panel's body content. It maintains the color scheme context to ensure proper text visibility and color contrast, and should match the color palette of the container it's in. This part defines the overall styling and boundaries for the panel's revealed content area.
CSS Custom Properties 0
None
Design Tokens 7
Token Summary Copy
--rh-space-xl
--rh-space-md
--rh-space-lg
--rh-color-border-subtle
--rh-border-width-lg
--rh-color-accent-brand
--rh-color-text-primary
Edit this page on GitHub
© 2025 Red Hat Deploys by Netlify