monochrome-ui

Quick Start

Build a working collapsible (or accordion) on a page. By the end, click and keyboard activation toggle the panel.

1. Install once

Add the package and import the runtime in your entry point:

shellscript
npm install monochrome
javascript
import "monochrome"

For CDN setup and browser support, see Installation.

2. Paste the HTML

html
<button
  type="button"
  id="mct:collapsible:demo"
  aria-expanded="false"
  aria-controls="mcc:collapsible:demo"
>
  Show content
</button>
<div
  id="mcc:collapsible:demo"
  aria-labelledby="mct:collapsible:demo"
  aria-hidden="true"
  hidden
>
  This content toggles when you click the button.
</div>

Prefer an accordion? Use the same pattern with mcr:, mct:, and mcc: IDs under an accordion root. See the Accordion reference.

3. Confirm it works

Load the page, then:

  1. Click the button. The panel should appear and aria-expanded should become "true".
  2. Click again. The panel should hide.
  3. Focus the button with Tab and press Enter or Space. Keyboard activation should match mouse clicks.

No initialization call. The import registered the listeners; correct markup is enough.

Next