C&C Docs
Log in

cnc-accordion

A stack of collapsible panels. Each panel is one slotted element carrying a title attribute; its children become the body. Panels are rendered server-side and expand with a pure-CSS grid transition, so the content is in the HTML whether the panel is open or shut — searchable, indexable, and free of a measure pass on open.

Quick start

Put one child per panel inside the accordion and give each a title. Everything inside that child is the panel body.

A server-rendered component framework with client-side hydration.

A widget is a single file set — template, controller, and scoped styles — registered under its own element name.

Yes. Widgets can contain other widgets and render recursively.

 
<cnc-accordion>
  <div title="What is C&amp;C?">
    <p>A server-rendered component framework.</p>
  </div>
  <div title="How do widgets work?">
    <p>Template, controller, and scoped styles in one file set.</p>
  </div>
</cnc-accordion>

Panel attributes

The panels themselves are configured on the slotted children, not on the accordion.

Attribute Required Purpose
title yes The header text. A child without title is not a panel — it is dropped from the render entirely, with no warning.
content no An HTML string used as the body. When present it wins over the child's own markup, so the two forms are alternatives, not layers.

The child's tag is not preserved — every panel is rendered into the widget's own cnc-accordion_panel markup and only title and content are read off it. Use <div>; a <section> or <details> buys nothing.

Known gaps

  • No panel can start open. Every panel is built with open: false and no slot attribute changes that, so the accordion always renders fully collapsed. There is no way to author an FAQ whose first answer is already showing.
  • The header is not keyboard-operable. It carries role="button", aria-expanded and tabindex="0", so it takes focus and announces as a button — but the only handler is a click, and a div does not synthesise clicks from Enter or Space. Tab to a header and press Enter: nothing happens.
  • The whole panel shows a pointer cursor. Only the header toggles, but cursor: pointer is set on the panel, so an open body advertises a click it will not act on.

Usage guidance

Reach for an accordion when a page has several sections a reader will want one at a time — an FAQ, a settings page, a long form broken into stages. Prefer cnc-details for a single independent disclosure, and cnc-tabs when the sections are alternatives a reader switches between rather than a list they scan. Because the widget reports nothing about which panel is open and no panel can start open, do not build navigation or a wizard on it — use cnc-steps or cnc-wizard, which own that state deliberately.

← Back to Widgets