Accordion Since v1.0.0

Overview

Style

Guidelines

Code

Accessibility

Demos

Accordion

Accents Bottom

Accents

Color Context

Expanded Attribute

Expanded Index

Felt Theme

Large

Nested

Right To Left

Accordion

Accents Bottom

Accents

Color Context

Expanded Attribute

Expanded Index

Felt Theme

Large

Nested

Right To Left

Accordion

Default accordion with multiple collapsible panels.

import '@rhds/elements/rh-accordion/rh-accordion.js';

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

<link rel="stylesheet" href="../rh-accordion-lightdom-shim.css">

import { Accordion } from "@rhds/elements/react/rh-accordion/rh-accordion.js";
import { AccordionHeader } from "@rhds/elements/react/rh-accordion-header/rh-accordion-header.js";
import { AccordionPanel } from "@rhds/elements/react/rh-accordion-panel/rh-accordion-panel.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <Accordion>
    <h2>
      <AccordionHeader>Item One</AccordionHeader>
    </h2>
    <AccordionPanel>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </AccordionPanel>
    <h2>
      <AccordionHeader>Item Two</AccordionHeader>
    </h2>
    <AccordionPanel>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </AccordionPanel>
    <h2>
      <AccordionHeader>Item Three</AccordionHeader>
    </h2>
    <AccordionPanel>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </AccordionPanel>
  </Accordion>
  <link rel="stylesheet" href="../rh-accordion-lightdom-shim.css" />
);

Accents Bottom

Accordion with accent content positioned below the header title text using accents="bottom".

import '@rhds/elements/rh-accordion/rh-accordion.js';
import '@rhds/elements/rh-tag/rh-tag.js';

<rh-accordion accents="bottom">
  <rh-accordion-header>
    Item One
    <rh-tag slot="accents" color="green" variant="filled" icon="information">Green</rh-tag>
    <rh-tag slot="accents" color="red" variant="filled" icon="information">Red</rh-tag>
    <rh-tag slot="accents" color="orange" variant="filled" icon="notification-fill">Orange</rh-tag>
    <rh-tag slot="accents" color="purple" variant="filled" icon="ban">Purple</rh-tag>
  </rh-accordion-header>
  <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-header>
    Item Two
    <rh-tag slot="accents" color="green" variant="filled" icon="information">Green</rh-tag>
  </rh-accordion-header>
  <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-header>
    Item Three
    <rh-tag slot="accents" color="red" variant="filled" icon="information">Red</rh-tag>
  </rh-accordion-header>
  <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>

<link rel="stylesheet" href="../rh-accordion-lightdom-shim.css">

import { Accordion } from "@rhds/elements/react/rh-accordion/rh-accordion.js";
import { AccordionHeader } from "@rhds/elements/react/rh-accordion-header/rh-accordion-header.js";
import { AccordionPanel } from "@rhds/elements/react/rh-accordion-panel/rh-accordion-panel.js";
import { Tag } from "@rhds/elements/react/rh-tag/rh-tag.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <Accordion accents="bottom">
    <AccordionHeader>
      Item One
      <Tag slot="accents" color="green" variant="filled" icon="information">Green</Tag>
      <Tag slot="accents" color="red" variant="filled" icon="information">Red</Tag>
      <Tag slot="accents" color="orange" variant="filled" icon="notification-fill">Orange</Tag>
      <Tag slot="accents" color="purple" variant="filled" icon="ban">Purple</Tag>
    </AccordionHeader>
    <AccordionPanel>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </AccordionPanel>
    <AccordionHeader>
      Item Two
      <Tag slot="accents" color="green" variant="filled" icon="information">Green</Tag>
    </AccordionHeader>
    <AccordionPanel>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </AccordionPanel>
    <AccordionHeader>
      Item Three
      <Tag slot="accents" color="red" variant="filled" icon="information">Red</Tag>
    </AccordionHeader>
    <AccordionPanel>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </AccordionPanel>
  </Accordion>
  <link rel="stylesheet" href="../rh-accordion-lightdom-shim.css" />
);

Accents

Accordion headers with inline accent slot content such as tags or badges alongside the title.

import '@rhds/elements/rh-accordion/rh-accordion.js';
import '@rhds/elements/rh-tag/rh-tag.js';

<rh-accordion>
  <rh-accordion-header>
    Item One
    <rh-tag slot="accents" color="green" variant="filled" icon="information">Green</rh-tag>
    <rh-tag slot="accents" color="red" variant="filled" icon="information">Red</rh-tag>
    <rh-tag slot="accents" color="orange" variant="filled" icon="notification-fill">Orange</rh-tag>
    <rh-tag slot="accents" color="purple" variant="filled" icon="ban">Purple</rh-tag>
  </rh-accordion-header>
  <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-header>
    Item Two
    <rh-tag slot="accents" color="green" variant="filled" icon="information">Green</rh-tag>
  </rh-accordion-header>
  <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-header>
    Item Three
    <rh-tag slot="accents" color="red" variant="filled" icon="information">Red</rh-tag>
  </rh-accordion-header>
  <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>

<link rel="stylesheet" href="../rh-accordion-lightdom-shim.css">

import { Accordion } from "@rhds/elements/react/rh-accordion/rh-accordion.js";
import { AccordionHeader } from "@rhds/elements/react/rh-accordion-header/rh-accordion-header.js";
import { AccordionPanel } from "@rhds/elements/react/rh-accordion-panel/rh-accordion-panel.js";
import { Tag } from "@rhds/elements/react/rh-tag/rh-tag.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <Accordion>
    <AccordionHeader>
      Item One
      <Tag slot="accents" color="green" variant="filled" icon="information">Green</Tag>
      <Tag slot="accents" color="red" variant="filled" icon="information">Red</Tag>
      <Tag slot="accents" color="orange" variant="filled" icon="notification-fill">Orange</Tag>
      <Tag slot="accents" color="purple" variant="filled" icon="ban">Purple</Tag>
    </AccordionHeader>
    <AccordionPanel>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </AccordionPanel>
    <AccordionHeader>
      Item Two
      <Tag slot="accents" color="green" variant="filled" icon="information">Green</Tag>
    </AccordionHeader>
    <AccordionPanel>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </AccordionPanel>
    <AccordionHeader>
      Item Three
      <Tag slot="accents" color="red" variant="filled" icon="information">Red</Tag>
    </AccordionHeader>
    <AccordionPanel>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </AccordionPanel>
  </Accordion>
  <link rel="stylesheet" href="../rh-accordion-lightdom-shim.css" />
);

Color Context

Accordion rendered across different color palettes to demonstrate automatic theme adaptation.

import '@rhds/elements/rh-accordion/rh-accordion.js';
import '@rhds/elements/rh-cta/rh-cta.js';

import '@rhds/elements/lib/elements/rh-context-demo/rh-context-demo.js';
import { ContextChangeEvent } from '@rhds/elements/lib/elements/rh-context-picker/rh-context-picker.js';

document.getElementById('nested').addEventListener('change', function(event) {
  if (event instanceof ContextChangeEvent) {
    event.stopPropagation();
  }
});

<rh-context-demo>
  <rh-accordion>
    <rh-accordion-header expanded="">Item One</rh-accordion-header>
    <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-cta href="#">Call To Action</rh-cta>

      <rh-accordion id="nested">

        <rh-accordion-header expanded="">Forced Palette</rh-accordion-header>
        <rh-accordion-panel>
<label> No matter the parent context, this panel should always be
  <rh-context-picker target="nested" value="lightest"></rh-context-picker>
</label>
<rh-cta href="#">Call To Action</rh-cta>
        </rh-accordion-panel>

        <rh-accordion-header>Item Two</rh-accordion-header>
        <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-cta href="#">Call To Action</rh-cta>
        </rh-accordion-panel>
      </rh-accordion>
    </rh-accordion-panel>

    <rh-accordion-header>Item Two</rh-accordion-header>
    <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-header>Item Three</rh-accordion-header>
    <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-context-demo>



<link rel="stylesheet" href="../rh-accordion-lightdom-shim.css">

import { Accordion } from "@rhds/elements/react/rh-accordion/rh-accordion.js";
import { AccordionHeader } from "@rhds/elements/react/rh-accordion-header/rh-accordion-header.js";
import { AccordionPanel } from "@rhds/elements/react/rh-accordion-panel/rh-accordion-panel.js";
import { ContextDemo } from "@rhds/elements/react/rh-context-demo/rh-context-demo.js";
import { ContextPicker } from "@rhds/elements/react/rh-context-picker/rh-context-picker.js";
import { Cta } from "@rhds/elements/react/rh-cta/rh-cta.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <ContextDemo>
    <Accordion>
      <AccordionHeader expanded>Item One</AccordionHeader>
      <AccordionPanel>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <Cta href="#">Call To Action</Cta>
        <Accordion id="nested">
<AccordionHeader expanded>Forced Palette</AccordionHeader>
<AccordionPanel>
  <label>
    No matter the parent context, this panel should always be
    <ContextPicker target="nested" value="lightest" />
  </label>
  <Cta href="#">Call To Action</Cta>
</AccordionPanel>
<AccordionHeader>Item Two</AccordionHeader>
<AccordionPanel>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  <Cta href="#">Call To Action</Cta>
</AccordionPanel>
        </Accordion>
      </AccordionPanel>
      <AccordionHeader>Item Two</AccordionHeader>
      <AccordionPanel>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </AccordionPanel>
      <AccordionHeader>Item Three</AccordionHeader>
      <AccordionPanel>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </AccordionPanel>
    </Accordion>
  </ContextDemo>
  <link rel="stylesheet" href="../rh-accordion-lightdom-shim.css" />
);

Expanded Attribute

Accordion panel expanded on load using the expanded attribute directly on the header element.

import '@rhds/elements/rh-accordion/rh-accordion.js';

<rh-accordion>

  <h2><rh-accordion-header expanded="">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 expanded="">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>

<link rel="stylesheet" href="../rh-accordion-lightdom-shim.css">

import { Accordion } from "@rhds/elements/react/rh-accordion/rh-accordion.js";
import { AccordionHeader } from "@rhds/elements/react/rh-accordion-header/rh-accordion-header.js";
import { AccordionPanel } from "@rhds/elements/react/rh-accordion-panel/rh-accordion-panel.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <Accordion>
    <h2>
      <AccordionHeader expanded>Item One</AccordionHeader>
    </h2>
    <AccordionPanel>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </AccordionPanel>
    <h2>
      <AccordionHeader expanded>Item Two</AccordionHeader>
    </h2>
    <AccordionPanel>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </AccordionPanel>
    <h2>
      <AccordionHeader>Item Three</AccordionHeader>
    </h2>
    <AccordionPanel>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </AccordionPanel>
  </Accordion>
  <link rel="stylesheet" href="../rh-accordion-lightdom-shim.css" />
);

Expanded Index

Accordion with specific panels expanded on initial render using the expanded-index attribute.

import '@rhds/elements/rh-accordion/rh-accordion.js';

<rh-accordion expanded-index="0, 2">

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

<link rel="stylesheet" href="../rh-accordion-lightdom-shim.css">

import { Accordion } from "@rhds/elements/react/rh-accordion/rh-accordion.js";
import { AccordionHeader } from "@rhds/elements/react/rh-accordion-header/rh-accordion-header.js";
import { AccordionPanel } from "@rhds/elements/react/rh-accordion-panel/rh-accordion-panel.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <Accordion expanded-index="0, 2">
    <h2>
      <AccordionHeader>Item One</AccordionHeader>
    </h2>
    <AccordionPanel>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </AccordionPanel>
    <h2>
      <AccordionHeader>Item Two</AccordionHeader>
    </h2>
    <AccordionPanel>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </AccordionPanel>
    <h2>
      <AccordionHeader>Item Three</AccordionHeader>
    </h2>
    <AccordionPanel>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </AccordionPanel>
  </Accordion>
  <link rel="stylesheet" href="../rh-accordion-lightdom-shim.css" />
);

Accordion with the Project Felt preview theme — borderless, borderless large, bordered, and bordered large variants. Note: class="bordered" is a Felt-specific CSS class, not part of the element API.

.example-row {
  margin-block: var(--rh-space-2xl, 32px);
}
.felt-preview {
  padding: var(--rh-space-2xl, 32px);
}

import '@rhds/elements/rh-accordion/rh-accordion.js';

<link rel="stylesheet" href="/theming/themes/project-felt/preview/felt-theme-preview.css">



<div class="felt-preview">
  <h3>Borderless (Default)</h3>
  <div class="example-row">
    <rh-accordion>
      <rh-accordion-header>Accordion item one</rh-accordion-header>
      <rh-accordion-panel>
        <p>Panel content for item one. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </rh-accordion-panel>
      <rh-accordion-header expanded="">Accordion item two</rh-accordion-header>
      <rh-accordion-panel expanded="">
        <p>Panel content for item two. Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
      </rh-accordion-panel>
      <rh-accordion-header>Accordion item three</rh-accordion-header>
      <rh-accordion-panel>
        <p>Panel content for item three.</p>
      </rh-accordion-panel>
    </rh-accordion>
  </div>

  <h3>Borderless — Large</h3>
  <div class="example-row">
    <rh-accordion large="">
      <rh-accordion-header>Accordion item one</rh-accordion-header>
      <rh-accordion-panel>
        <p>Panel content for item one. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </rh-accordion-panel>
      <rh-accordion-header expanded="">Accordion item two</rh-accordion-header>
      <rh-accordion-panel expanded="">
        <p>Panel content for item two. Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
      </rh-accordion-panel>
    </rh-accordion>
  </div>

  <h3>Bordered</h3>
  <div class="example-row">
    <rh-accordion class="bordered">
      <rh-accordion-header>Accordion item one</rh-accordion-header>
      <rh-accordion-panel>
        <p>Panel content for item one. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </rh-accordion-panel>
      <rh-accordion-header expanded="">Accordion item two</rh-accordion-header>
      <rh-accordion-panel expanded="">
        <p>Panel content for item two. Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
      </rh-accordion-panel>
      <rh-accordion-header>Accordion item three</rh-accordion-header>
      <rh-accordion-panel>
        <p>Panel content for item three.</p>
      </rh-accordion-panel>
    </rh-accordion>
  </div>

  <h3>Bordered — Large</h3>
  <div class="example-row">
    <rh-accordion large="" class="bordered">
      <rh-accordion-header>Accordion item one</rh-accordion-header>
      <rh-accordion-panel>
        <p>Panel content for item one. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </rh-accordion-panel>
      <rh-accordion-header expanded="">Accordion item two</rh-accordion-header>
      <rh-accordion-panel expanded="">
        <p>Panel content for item two. Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
      </rh-accordion-panel>
    </rh-accordion>
  </div>
</div>

import { Accordion } from "@rhds/elements/react/rh-accordion/rh-accordion.js";
import { AccordionHeader } from "@rhds/elements/react/rh-accordion-header/rh-accordion-header.js";
import { AccordionPanel } from "@rhds/elements/react/rh-accordion-panel/rh-accordion-panel.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <link rel="stylesheet" href="/theming/themes/project-felt/preview/felt-theme-preview.css" />
  <div className="felt-preview">
    <h3>Borderless (Default)</h3>
    <div className="example-row">
      <Accordion>
        <AccordionHeader>Accordion item one</AccordionHeader>
        <AccordionPanel>
<p>Panel content for item one. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </AccordionPanel>
        <AccordionHeader expanded>Accordion item two</AccordionHeader>
        <AccordionPanel expanded>
<p>Panel content for item two. Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
        </AccordionPanel>
        <AccordionHeader>Accordion item three</AccordionHeader>
        <AccordionPanel>
<p>Panel content for item three.</p>
        </AccordionPanel>
      </Accordion>
    </div>
    <h3>Borderless — Large</h3>
    <div className="example-row">
      <Accordion large>
        <AccordionHeader>Accordion item one</AccordionHeader>
        <AccordionPanel>
<p>Panel content for item one. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </AccordionPanel>
        <AccordionHeader expanded>Accordion item two</AccordionHeader>
        <AccordionPanel expanded>
<p>Panel content for item two. Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
        </AccordionPanel>
      </Accordion>
    </div>
    <h3>Bordered</h3>
    <div className="example-row">
      <Accordion className="bordered">
        <AccordionHeader>Accordion item one</AccordionHeader>
        <AccordionPanel>
<p>Panel content for item one. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </AccordionPanel>
        <AccordionHeader expanded>Accordion item two</AccordionHeader>
        <AccordionPanel expanded>
<p>Panel content for item two. Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
        </AccordionPanel>
        <AccordionHeader>Accordion item three</AccordionHeader>
        <AccordionPanel>
<p>Panel content for item three.</p>
        </AccordionPanel>
      </Accordion>
    </div>
    <h3>Bordered — Large</h3>
    <div className="example-row">
      <Accordion large className="bordered">
        <AccordionHeader>Accordion item one</AccordionHeader>
        <AccordionPanel>
<p>Panel content for item one. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </AccordionPanel>
        <AccordionHeader expanded>Accordion item two</AccordionHeader>
        <AccordionPanel expanded>
<p>Panel content for item two. Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
        </AccordionPanel>
      </Accordion>
    </div>
  </div>
);

Large

Large size accordion with increased font size and padding for page-level content sections.

import '@rhds/elements/rh-accordion/rh-accordion.js';

<rh-accordion large="">
  <rh-accordion-header>Item One</rh-accordion-header>
  <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-header>Item Two</rh-accordion-header>
  <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-header>Item Three</rh-accordion-header>
  <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>

<link rel="stylesheet" href="../rh-accordion-lightdom-shim.css">

import { Accordion } from "@rhds/elements/react/rh-accordion/rh-accordion.js";
import { AccordionHeader } from "@rhds/elements/react/rh-accordion-header/rh-accordion-header.js";
import { AccordionPanel } from "@rhds/elements/react/rh-accordion-panel/rh-accordion-panel.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <Accordion large>
    <AccordionHeader>Item One</AccordionHeader>
    <AccordionPanel>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </AccordionPanel>
    <AccordionHeader>Item Two</AccordionHeader>
    <AccordionPanel>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </AccordionPanel>
    <AccordionHeader>Item Three</AccordionHeader>
    <AccordionPanel>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </AccordionPanel>
  </Accordion>
  <link rel="stylesheet" href="../rh-accordion-lightdom-shim.css" />
);

Nested

Accordion panels containing nested accordion components for hierarchical content organization.

import '@rhds/elements/rh-accordion/rh-accordion.js';
import '@rhds/elements/rh-cta/rh-cta.js';

<rh-accordion large="">
  <rh-accordion-header>Item One</rh-accordion-header>
  <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-cta href="#">Call To Action</rh-cta>

    <rh-accordion>
      <rh-accordion-header>Item One</rh-accordion-header>
      <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-cta href="#">Call To Action</rh-cta>
      </rh-accordion-panel>
      <rh-accordion-header>Item Two</rh-accordion-header>
      <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-cta href="#">Call To Action</rh-cta>
      </rh-accordion-panel>
    </rh-accordion>
  </rh-accordion-panel>

  <rh-accordion-header>Item Two</rh-accordion-header>
  <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-header>Item Three</rh-accordion-header>
  <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>

<link rel="stylesheet" href="../rh-accordion-lightdom-shim.css">

import { Accordion } from "@rhds/elements/react/rh-accordion/rh-accordion.js";
import { AccordionHeader } from "@rhds/elements/react/rh-accordion-header/rh-accordion-header.js";
import { AccordionPanel } from "@rhds/elements/react/rh-accordion-panel/rh-accordion-panel.js";
import { Cta } from "@rhds/elements/react/rh-cta/rh-cta.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <Accordion large>
    <AccordionHeader>Item One</AccordionHeader>
    <AccordionPanel>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      <Cta href="#">Call To Action</Cta>
      <Accordion>
        <AccordionHeader>Item One</AccordionHeader>
        <AccordionPanel>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<Cta href="#">Call To Action</Cta>
        </AccordionPanel>
        <AccordionHeader>Item Two</AccordionHeader>
        <AccordionPanel>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<Cta href="#">Call To Action</Cta>
        </AccordionPanel>
      </Accordion>
    </AccordionPanel>
    <AccordionHeader>Item Two</AccordionHeader>
    <AccordionPanel>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </AccordionPanel>
    <AccordionHeader>Item Three</AccordionHeader>
    <AccordionPanel>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </AccordionPanel>
  </Accordion>
  <link rel="stylesheet" href="../rh-accordion-lightdom-shim.css" />
);

Right To Left

Accordion in a right-to-left (RTL) text direction context, demonstrating correct layout mirroring.

import '@rhds/elements/rh-accordion/rh-accordion.js';
import '@rhds/elements/rh-cta/rh-cta.js';

<section dir="rtl" lang="he" id="rtl">
  <rh-accordion>
    <rh-accordion-header expanded="">תוכנה חופשית</rh-accordion-header>
    <rh-accordion-panel>
      <p> ”תוכנה חופשית“ זה עניין של חירות, לא של מחיר. כדי להבין את העקרון, צריך לחשוב על ”חופש“ כמו ב”חופש הביטו“ ולא כמו ב”בירה חופשי“. </p>
      <rh-cta href="#">קראו עוד</rh-cta>
      <rh-accordion>
        <rh-accordion-header>תוכנה חופשית</rh-accordion-header>
        <rh-accordion-panel>
<p>תוכנה היא תוכנה חופשית אם למשתמשים יש את כל החירויות הללו. לפיכך אתם צריכים להיות חופשיים להפיץ עותקים בהפצת-המשך, עם או בלי שינויים, חינם או בעבור תשלום, לכל אחד בכל מקום. החירות לעשות את הדברים האלו פירושו (בין שאר הדברים) שאינכם חייבים לבקש רשות ו/או לשלם בשבילה. </p>
<rh-cta href="#">קראו עוד</rh-cta>
        </rh-accordion-panel>
        <rh-accordion-header>תוכנה חופשית</rh-accordion-header>
        <rh-accordion-panel>
<p> החופש להריץ את התוכנה פירושו החופש לכל אדם או ארגון להשתמש בתוכנה על כל סוג של מערכת מחשב, לכל מטרה שהיא, ומבלי להדרש ליצור קשר כתוצאה מכך עם המפתח או כל ישות מסוימת אחרת. </p>
<rh-cta href="#">קראו עוד</rh-cta>
        </rh-accordion-panel>
      </rh-accordion>
    </rh-accordion-panel>

    <rh-accordion-header>תוכנה חופשית</rh-accordion-header>
    <rh-accordion-panel>
      <p>" החופש להפיץ עותקים בהפצת-המשך חייב לכלול צורות בינאריות או ניתנות-להרצה של התוכנה, כמו גם את קוד-המקור, לגרסאות שעברו שינוי כמו גם לגרסאות שלא שונו. (הפצת תוכנות בצורה ניתנת-להרצה היא חיונית למערכות הפעלה חופשיות נוחות להתקנה.) זה בסדר אם אין דרך להפיק צורה בינארית או ניתנת-להרצה של תוכנה מסוימת (מאחר ומספר שפות לא תומכות בתכונה הזו), אך חייב להיות לכם החופש להפיץ צורות כאלה בהפצת-המשך במידה ומצאתם או פיתחתם דרך לעשות זאת. </p>
    </rh-accordion-panel>

    <rh-accordion-header>תוכנה חופשית</rh-accordion-header>
    <rh-accordion-panel>
      <p> כדי שהחופש לשנות, והחופש לפרסם גרסאות שעברו שינוי יהיו בעלי משמעות, חייבת להיות לכם גישה לקוד-המקור של התוכנה. לכן נגישות של קוד-המקור היא תנאי הכרחי לתוכנה חופשית. </p>
    </rh-accordion-panel>
  </rh-accordion>
</section>

<link rel="stylesheet" href="../rh-accordion-lightdom-shim.css">

import { Accordion } from "@rhds/elements/react/rh-accordion/rh-accordion.js";
import { AccordionHeader } from "@rhds/elements/react/rh-accordion-header/rh-accordion-header.js";
import { AccordionPanel } from "@rhds/elements/react/rh-accordion-panel/rh-accordion-panel.js";
import { Cta } from "@rhds/elements/react/rh-cta/rh-cta.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <section dir="rtl" lang="he" id="rtl">
    <Accordion>
      <AccordionHeader expanded>תוכנה חופשית</AccordionHeader>
      <AccordionPanel>
        <p>”תוכנה חופשית“ זה עניין של חירות, לא של מחיר. כדי להבין את העקרון, צריך לחשוב על ”חופש“ כמו ב”חופש הביטו“ ולא כמו ב”בירה חופשי“.</p>
        <Cta href="#">קראו עוד</Cta>
        <Accordion>
<AccordionHeader>תוכנה חופשית</AccordionHeader>
<AccordionPanel>
  <p>תוכנה היא תוכנה חופשית אם למשתמשים יש את כל החירויות הללו. לפיכך אתם צריכים להיות חופשיים להפיץ עותקים בהפצת-המשך, עם או בלי שינויים, חינם או בעבור תשלום, לכל אחד בכל מקום. החירות לעשות את הדברים האלו פירושו (בין שאר הדברים) שאינכם חייבים לבקש רשות ו/או לשלם בשבילה.</p>
  <Cta href="#">קראו עוד</Cta>
</AccordionPanel>
<AccordionHeader>תוכנה חופשית</AccordionHeader>
<AccordionPanel>
  <p>החופש להריץ את התוכנה פירושו החופש לכל אדם או ארגון להשתמש בתוכנה על כל סוג של מערכת מחשב, לכל מטרה שהיא, ומבלי להדרש ליצור קשר כתוצאה מכך עם המפתח או כל ישות מסוימת אחרת.</p>
  <Cta href="#">קראו עוד</Cta>
</AccordionPanel>
        </Accordion>
      </AccordionPanel>
      <AccordionHeader>תוכנה חופשית</AccordionHeader>
      <AccordionPanel>
        <p>" החופש להפיץ עותקים בהפצת-המשך חייב לכלול צורות בינאריות או ניתנות-להרצה של התוכנה, כמו גם את קוד-המקור, לגרסאות שעברו שינוי כמו גם לגרסאות שלא שונו. (הפצת תוכנות בצורה ניתנת-להרצה היא חיונית למערכות הפעלה חופשיות נוחות להתקנה.) זה בסדר אם אין דרך להפיק צורה בינארית או ניתנת-להרצה של תוכנה מסוימת (מאחר ומספר שפות לא תומכות בתכונה הזו), אך חייב להיות לכם החופש להפיץ צורות כאלה בהפצת-המשך במידה ומצאתם או פיתחתם דרך לעשות זאת.</p>
      </AccordionPanel>
      <AccordionHeader>תוכנה חופשית</AccordionHeader>
      <AccordionPanel>
        <p>כדי שהחופש לשנות, והחופש לפרסם גרסאות שעברו שינוי יהיו בעלי משמעות, חייבת להיות לכם גישה לקוד-המקור של התוכנה. לכן נגישות של קוד-המקור היא תנאי הכרחי לתוכנה חופשית.</p>
      </AccordionPanel>
    </Accordion>
  </section>
  <link rel="stylesheet" href="../rh-accordion-lightdom-shim.css" />
);

Edit this page on GitHub

Accordion Since v1.0.0

Accordion

Accents Bottom

Accents

Color Context

Expanded Attribute

Expanded Index

Felt Theme

Large

Nested

Right To Left

Other libraries

Feedback

Red Hat footer

Red Hat legal and privacy links

Red Hat legal and privacy links

Other libraries

Feedback

Related elements or patterns

Red Hat footer

Red Hat legal and privacy links

Red Hat legal and privacy links