Accordions collapse/expand client-side. Giving an item an id adds a copy-link button that copies #<id> to the clipboard.

Closed by default

accordions()

Why pure TypeScript?

No React, no runtime dependencies — builders return HTML strings and one small vanilla runtime wires the hooks.

How do styles stay isolated?

Everything is namespaced: cpd- classes, --cpd-* variables and data-cpd-* hooks.

accordions([
  { title: 'Why pure TypeScript?', content: '<p>No React, no runtime dependencies.</p>' },
  { title: 'How do styles stay isolated?', content: '<p>Everything is namespaced.</p>' },
]);

Open by default, with anchors

defaultOpen + id

Single accordion, open

This one starts expanded and exposes a copy-link anchor.

accordion(
  { title: 'Single accordion, open', content: '<p>This one starts expanded.</p>', id: 'open-acc', defaultOpen: true },
);

Props

Option	Type	Default	Description
title	string	—	Accordion header (required).
content	string	''	Collapsible body (HTML allowed).
id	string	—	Anchor id; also enables the copy-link button.
defaultOpen	boolean	false	Start expanded.

Notes

• accordions(items) wraps a list of AccordionOptions in a data-cpd-accordions container; accordion(options) builds a single item.
• The aria-expanded attribute is set server-side from defaultOpen, then maintained by the runtime.