Accordion — RenDS Components

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?

We charge per user, per month. The Basic plan is $9; Pro is $29 and removes seat caps. Annual billing saves 20%.

Can I cancel anytime?

Yes — cancel from your billing settings. Your plan stays active until the end of the current period; we don't pro-rate refunds.

Do you offer a free trial?

14 days, no credit card. After the trial you'll be downgraded to the free tier unless you pick a plan.

<ren-accordion type="single">
  <details open>
    <summary class="ren-accordion-trigger">How does pricing work?</summary>
    <div class="ren-accordion-content">We charge per user, per month…</div>
  </details>
  <details>
    <summary class="ren-accordion-trigger">Can I cancel anytime?</summary>
    <div class="ren-accordion-content">Yes — cancel from your billing settings…</div>
  </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.
`.ren-accordion-trigger`	On the `<summary>`. Draws the row, the chevron, and the focus ring.
`.ren-accordion-content`	On the panel `<div>` inside each `<details>`. Owns the expand / collapse animation.

Web Component attributes

Attribute	Type	Default	Notes
`type`	"single" \| "multiple"	"single"	In `single` mode opening one item closes the others (mutually exclusive). `multiple` lets any number stay open.
`collapsible`	boolean	absent	Single mode only. If present, the open item can be closed, leaving all items collapsed.
`default-value`	string (indices)	—	Comma-separated item indices to open on init, e.g. `"0,2"`.

Events

Event	Detail
`ren-accordion-change`	An item opened or closed. `{ item, isOpen, index }`.

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.