C&C Docs
Log in

cnc-details

A disclosure section: a clickable label with a chevron, and a body that glides open beneath it. Both halves are slots, so the label can be any markup and the body can hold anything — including another cnc-details.

Quick start

Put the body in the default slot and name the header with label. The section starts shut; clicking anywhere on the label row toggles it.

Click to expand

This content is revealed when the details section is opened. 

<cnc-details label="Click to expand">
  <p>This content is revealed when the details section is opened.</p>
</cnc-details>

Usage guidance

Use a details section to keep secondary content out of the way while leaving it one click away — advanced settings, a long error trace, the rest of a list. Content the reader needs to act on should not be hidden behind one.

For a set where only one section should be open at a time, use cnc-accordion instead: stacking these gives independent sections by design. And because the widget emits no event, anything that must react to a toggle should bind $open rather than listen.

← Back to Widgets