Collapsible

An interactive component which expands and collapses a content panel.

What is included in the design system? expand_more

The design system includes 53 components across foundations, styles, and UI patterns — all with dark mode support and copy-ready code.

How do I install it? expand_more

Run pnpm add @norbielink/ds or copy the component CSS directly from the source.

<div class="coll" onclick="toggleColl(this)">
  <div class="coll-trigger">
    Section title
    <span class="material-icons-round">expand_more</span>
  </div>
  <div class="coll-content">
    <div class="coll-text">Content here.</div>
  </div>
</div>

Installation

Built with pure HTML and CSS. Include ds-shared.css in your project.

pnpm add @norbielink/ds

53 components with full dark mode support.

API Reference

Classes

Class	Description
`coll`	Container — add `.open` to expand
`coll-trigger`	Clickable header row
`coll-content`	Collapsible body (max-height transition)
`coll-dk`	Dark mode modifier

← Previous Chips Next → Combobox