Accordion
On this page
On this page
Accordion
Default accordion with multiple collapsible panels.
Edit element properties
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".
Edit element properties
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.
Edit element properties
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.
Edit element properties
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.
Edit element properties
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.
Edit element properties
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" />
);Large
Large size accordion with increased font size and padding for page-level content sections.
Edit element properties
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.
Edit element properties
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.
Edit element properties
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" />
);Accordion
Default accordion with multiple collapsible panels.
Edit element properties
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".
Edit element properties
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.
Edit element properties
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.
Edit element properties
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.
Edit element properties
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.
Edit element properties
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" />
);Large
Large size accordion with increased font size and padding for page-level content sections.
Edit element properties
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.
Edit element properties
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.
Edit element properties
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" />
);Other libraries
To learn more about our other libraries, visit this page.
Feedback
To give feedback about anything on this page, contact us.
