Composite
Accordion Hybrid
Stack of collapsible panels. Built on the native <details> + <summary> pair so accessibility comes for free. Single-open or multi-open mode, animated expand / collapse.
About
Overview
Accordions hide secondary content behind disclosure triggers. Use them when the page has more sections than fits on a screen and most users only need one or two at a time — FAQs, settings groups, app feature tours. RenDS just styles the native <details>; the platform does the open/close logic, keyboard handling, and the open attribute.
Don't hide critical content in an accordion. If users need to read it to make a decision, show it. Accordions hide content one level removed from the primary task.
Live
Demo
How does pricing work?
Can I cancel anytime?
Do you offer a free trial?
<ren-accordion>
<details open>
<summary>How does pricing work?</summary>
<p>We charge per user, per month…</p>
</details>
<details>
<summary>Can I cancel anytime?</summary>
<p>Yes — cancel from your billing settings…</p>
</details>
</ren-accordion>Reference
API
| Class | Effect |
|---|---|
.ren-accordion | Stack container. Borders the group; visually links the items. |
.ren-accordion-item | Optional class on each <details>. Useful when accordions live without the wrapper. |
Web Component attributes
| Attribute | Type | Default | Notes |
|---|---|---|---|
single | boolean | false | If present, opening one item closes the others (mutually exclusive mode). |
Inclusive by default
Accessibility
Native <details> handles all the accessibility — keyboard, screen reader announcement of expanded state, the aria-expanded wiring. You don't need to add anything.
- Tab moves focus to a closed
<summary>; Enter or Space toggles open / closed. - Screen readers announce "expanded" or "collapsed" automatically.
- The summary is the trigger — keep it short and start with a verb or noun the user is looking for.