Accordion

OverviewStyleGuidelinesCodeAccessibilityDemos
  1. Installation
  2. Usage
  3. rh-accordion-header
  4. rh-accordion-panel
  1. Installation
  2. Usage
  3. rh-accordion-header
  4. rh-accordion-panel

Installation

We recommend import maps when building pages with RHDS. Learn more about how to install on our getting started docs.

Red Hat CDN 
<script type="importmap">
{
  "imports": {
    "@rhds/elements/": "https://www.redhatstatic.com/dx/v1-alpha/@rhds/elements@2.1.1/elements/",
  }
}
</script>
Copy to Clipboard Wrap lines NPM 
npm install @rhds/elements
Copy to Clipboard Wrap lines JSPM 
<script type="importmap">
{
  "imports": {
    "@rhds/elements/rh-accordion/rh-accordion.js": "https://ga.jspm.io/npm:@rhds/elements@2.1.1/rh-accordion/rh-accordion.js"
  },
  "scopes": {
    "https://ga.jspm.io/": {
      "@floating-ui/core": "https://ga.jspm.io/npm:@floating-ui/core@1.6.8/dist/floating-ui.core.mjs",
      "@floating-ui/dom": "https://ga.jspm.io/npm:@floating-ui/dom@1.6.12/dist/floating-ui.dom.mjs",
      "@floating-ui/utils": "https://ga.jspm.io/npm:@floating-ui/utils@0.2.8/dist/floating-ui.utils.mjs",
      "@floating-ui/utils/dom": "https://ga.jspm.io/npm:@floating-ui/utils@0.2.8/dist/floating-ui.utils.dom.mjs",
      "@lit/context": "https://ga.jspm.io/npm:@lit/context@1.1.3/development/index.js",
      "@lit/reactive-element": "https://ga.jspm.io/npm:@lit/reactive-element@2.0.4/development/reactive-element.js",
      "@lit/reactive-element/decorators/": "https://ga.jspm.io/npm:@lit/reactive-element@2.0.4/development/decorators/",
      "@patternfly/pfe-core": "https://ga.jspm.io/npm:@patternfly/pfe-core@4.0.4/core.js",
      "@patternfly/pfe-core/": "https://ga.jspm.io/npm:@patternfly/pfe-core@4.0.4/",
      "@patternfly/pfe-core/ssr-shims.js": "https://ga.jspm.io/npm:@patternfly/pfe-core@4.0.4/core.js",
      "@rhds/elements/lib/": "https://ga.jspm.io/npm:@rhds/elements@2.1.1/lib/",
      "@rhds/elements/": "https://ga.jspm.io/npm:@rhds/elements@2.1.1/elements/",
      "@rhds/icons": "https://ga.jspm.io/npm:@rhds/icons@1.1.2/icons.js",
      "@rhds/icons/ui/": "https://ga.jspm.io/npm:@rhds/icons@1.1.2/ui/",
      "@rhds/tokens/css/": "https://ga.jspm.io/npm:@rhds/tokens@2.1.0/css/",
      "@rhds/tokens/media.js": "https://ga.jspm.io/npm:@rhds/tokens@2.1.0/js/media.js",
      "lit": "https://ga.jspm.io/npm:lit@3.2.1/index.js",
      "lit-element/lit-element.js": "https://ga.jspm.io/npm:lit-element@4.1.1/development/lit-element.js",
      "lit-html": "https://ga.jspm.io/npm:lit-html@3.2.1/development/lit-html.js",
      "lit-html/": "https://ga.jspm.io/npm:lit-html@3.2.1/development/",
      "lit/": "https://ga.jspm.io/npm:lit@3.2.1/",
      "prism-esm": "https://ga.jspm.io/npm:prism-esm@1.29.0-fix.6/prism.js",
      "prism-esm/components/": "https://ga.jspm.io/npm:prism-esm@1.29.0-fix.6/components/",
      "tslib": "https://ga.jspm.io/npm:tslib@2.8.1/tslib.es6.mjs"
    }
  }
}
</script>
Copy to Clipboard Wrap lines

Add it to your page with this import statement

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

Usage

<rh-accordion>

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

Place the rh-accordion-header and rh-accordion-panel elements here.
Attributes 5
Attribute DOM Property Description Type Default
accents accents

Sets accordion header's accents position to inline or bottom

 
'inline' | 'bottom' | undefined
 
inline
large large

If this accordion uses large styles

 
boolean
 
false
bordered bordered

If this accordion has a border

 
boolean
 
true
color-palette colorPalette

Color Palette for this accordion.

 
ColorPalette | undefined
 
unknown
expanded-index expandedIndex

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

<pf-accordion expanded-index="1,2">
  ...
</pf-accordion>
 
unknown
 
unknown
Methods 6
Method Name Description
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 3
Event Name Description
header
expand

when a panel expands
collapse

when a panel collapses
CSS Shadow Parts 0
None
CSS Custom Properties 0
None
Design Tokens 4
Token Copy
--rh-box-shadow-sm
--rh-color-border-subtle
--rh-color-surface
--rh-color-text-primary

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 Description

accordion toggle content
accents

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 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 15
Token Copy
--rh-border-width-lg
--rh-border-width-sm
--rh-color-accent-brand
--rh-color-border-subtle
--rh-color-surface
--rh-color-surface-darkest
--rh-color-surface-lightest
--rh-color-text-primary
--rh-font-family-body-text
--rh-font-size-body-text-lg
--rh-font-weight-heading-bold
--rh-font-weight-heading-medium
--rh-space-lg
--rh-space-md
--rh-space-xl

rh-accordion-panel

Accordion Panel

Slots 1
Slot Name Description
undefined

The content of the accordion panel can be any basic markup including but not limited to div, paragraph, or nested accordion panels.
Attributes 2
Attribute DOM Property Description Type Default
expanded expanded 
boolean
 
false
color-palette colorPalette 
ColorPalette | undefined
 
unknown
Methods 0
None
Events 0
None
CSS Shadow Parts 0
None
CSS Custom Properties 0
None
Design Tokens 12
Token Copy
--rh-border-width-lg
--rh-color-accent-brand
--rh-color-border-subtle
--rh-color-surface
--rh-color-surface-darkest
--rh-color-surface-lightest
--rh-color-text-primary
--rh-font-size-body-text-md
--rh-font-size-body-text-sm
--rh-space-lg
--rh-space-md
--rh-space-xl
Edit this page on GitHub