Accordion

Overview Style Guidelines Code Demos Accessibility
  1. Usage
  2. rh-accordion
  3. rh-accordion-header
  4. rh-accordion-panel
  1. Usage
  2. rh-accordion
  3. rh-accordion-header
  4. rh-accordion-panel

Installation

Learn more about how to install on our getting started docs.

Red Hat CDN 
<script type="module">
  import '@rhds/elements/rh-accordion/rh-accordion.js';
</script>
Import Map Example 
<script type="importmap">
  {
    "imports": {
      "@rhds/elements/": "https://www.redhatstatic.com/dx/v1-alpha/@rhds/elements@2.0.1/elements/",
    }
  }
</script>
 NPM 
npm install @rhds/elements
<script type="module">
  import '@rhds/elements/rh-accordion/rh-accordion.js';
</script>
 JSPM 
<script type="module">
  import '@rhds/elements/rh-accordion/rh-accordion.js';
</script>
Import Map Example 
<script type="importmap">
{
  "imports": {
    "@rhds/elements/rh-accordion/rh-accordion.js": "./elements/rh-accordion/rh-accordion.js"
  },
  "scopes": {
    "./": {
      "@lit/context": "https://ga.jspm.io/npm:@lit/context@1.1.2/development/index.js",
      "@patternfly/pfe-core": "https://ga.jspm.io/npm:@patternfly/pfe-core@4.0.2/core.js",
      "@patternfly/pfe-core/": "https://ga.jspm.io/npm:@patternfly/pfe-core@4.0.2/",
      "@rhds/elements/lib/context/headings/controller.js": "./lib/context/headings/controller.js",
      "@rhds/tokens/css/": "https://ga.jspm.io/npm:@rhds/tokens@2.1.0-next.15/css/",
      "lit": "https://ga.jspm.io/npm:lit@3.2.0/index.js",
      "lit/": "https://ga.jspm.io/npm:lit@3.2.0/",
      "tslib": "https://ga.jspm.io/npm:tslib@2.7.0/tslib.es6.mjs"
    },
    "https://ga.jspm.io/": {
      "@lit/context": "https://ga.jspm.io/npm:@lit/context@1.1.2/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/controllers/property-observer-controller.js": "https://ga.jspm.io/npm:@patternfly/pfe-core@4.0.2/controllers/property-observer-controller.js",
      "lit": "https://ga.jspm.io/npm:lit@3.2.0/index.js",
      "lit-element/lit-element.js": "https://ga.jspm.io/npm:lit-element@4.1.0/development/lit-element.js",
      "lit-html": "https://ga.jspm.io/npm:lit-html@3.2.0/development/lit-html.js",
      "lit-html/": "https://ga.jspm.io/npm:lit-html@3.2.0/development/",
      "tslib": "https://ga.jspm.io/npm:tslib@2.7.0/tslib.es6.mjs"
    }
  }
}
</script>

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>

rh-accordion

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