Collapse

Expandable and collapsible content panel. Supports controlled and uncontrolled modes. Complete Initialization first, then use the CLI or copy the source below.

Preview

Live

Content inside the first collapse. Can include any elements.

Add Collapse via CLI

After init and layout theme wiring (see MY_UI_THEME_LAYOUT.md in your project), add the Collapse component:

Add Collapse via CLI
npm exec -- my-ui add collapse

Component source

Collapse
<!-- Requires JS for toggle. Use React component for full behavior. -->
<div class="ui-collapse">
  <button class="ui-collapse__trigger" type="button" aria-expanded="false">
    <span class="ui-collapse__trigger-text">Click to expand</span>
    <svg class="ui-collapse__icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m6 9 6 6 6-6"/></svg>
  </button>
  <div class="ui-collapse__content" data-state="closed">
    <div class="ui-collapse__content-inner">Content here</div>
  </div>
</div>