Collapsible

Reveal secondary details in place with documented Button markup and Bootstrap's Collapse behavior.

Can I change this after saving?

Yes. You can reopen the request and update the details until the review starts.

Usage

Use .collapse for one section of content that should be hidden until the user asks for it. Connect the trigger to the content with data-bs-toggle="collapse" and data-bs-target or href, and keep the target id stable for aria-controls.

Use aria-expanded="false" when the panel starts closed and aria-expanded="true" when it starts open with .show. Bootstrap toggles .collapse, .collapsing, and .collapse.show during the transition, so keep padding on an inner wrapper instead of putting it directly on the collapsing element.

Use a button trigger for in-page disclosure whenever possible. Multiple triggers can point to the same target, and one trigger can target several panels with a selector, but keep labels specific so the user understands what will appear or disappear.

Collapsible

{"title": "Moo UI Collapsible - Basic", "description": "The trigger line stays fixed while details expand directly below without affecting horizontal measure.", "html": "<div class=\"moo-ui\" data-bs-theme=\"light\">\n<div class=\"collapsible\">\n  <div class=\"collapsible-header\">\n    <h4 class=\"collapsible-title\">Can we use this flow in operations?</h4>\n    <button class=\"btn btn-ghost btn-icon-sm\" type=\"button\" aria-label=\"Toggle task details\" data-bs-toggle=\"collapse\" data-bs-target=\"#collapsible-basic\" aria-expanded=\"false\" aria-controls=\"collapsible-basic\">\n      <svg\n        data-icon=\"inline-start\"\n        data-lucide=\"chevrons-up-down\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        aria-hidden=\"true\"\n      >\n        <path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m7 15l5 5l5-5M7 9l5-5l5 5\"/>\n      </svg>\n    </button>\n  </div>\n  <div id=\"collapsible-basic\" class=\"collapse\">\n    <div class=\"collapsible-content\">Yes. This pattern is safe for internal and client workflows, and no external attribution is needed.</div>\n  </div>\n</div>\n</div>", "html_pre_processor": "none", "css": "", "css_pre_processor": "none", "css_starter": "neither", "css_external": "https://unpkg.com/@wpmoo/ui@1.3.0/dist/assets/css/moo-ui.css;https://ui.wpmoo.org/assets/css/codepen-demo.css", "js": "", "js_pre_processor": "none", "js_external": "https://cdn.jsdelivr.net/npm/bootstrap@5.3/dist/js/bootstrap.bundle.min.js;https://ui.wpmoo.org/assets/js/codepen-demo.js", "tags": ["moo-ui", "collapsible", "components"], "editors": "110", "js_module": false}

Can we use this flow in operations?

Yes. This pattern is safe for internal and client workflows, and no external attribution is needed.

1
2
3
4
5
6
7
8
9
10
11<div class="collapsible">
  <div class="collapsible-header">
    <h4 class="collapsible-title">Can we use this flow in operations?</h4>
    <button class="btn btn-ghost btn-icon-sm" type="button" aria-label="Toggle task details" data-bs-toggle="collapse" data-bs-target="#collapsible-basic" aria-expanded="false" aria-controls="collapsible-basic">
      <i class="lucide lucide-chevrons-up-down" data-icon="inline-start" aria-hidden="true"></i>
    </button>
  </div>
  <div id="collapsible-basic" class="collapse">
    <div class="collapsible-content">Yes. This pattern is safe for internal and client workflows, and no external attribution is needed.</div>
  </div>
</div>

Collapsible

{"title": "Moo UI Collapsible - Product review details", "description": "A compact header plus stacked metadata keeps this section readable even when expanded.", "html": "<div class=\"moo-ui\" data-bs-theme=\"light\">\n<div class=\"collapsible\">\n  <div class=\"collapsible-header\">\n    <h4 class=\"collapsible-title\">Product review details</h4>\n    <button class=\"btn btn-ghost btn-icon-sm\" type=\"button\" aria-label=\"Toggle product details\" data-bs-toggle=\"collapse\" data-bs-target=\"#collapsible-product\" aria-expanded=\"false\" aria-controls=\"collapsible-product\">\n      <svg\n        data-icon=\"inline-start\"\n        data-lucide=\"chevrons-up-down\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        aria-hidden=\"true\"\n      >\n        <path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m7 15l5 5l5-5M7 9l5-5l5 5\"/>\n      </svg>\n    </button>\n  </div>\n  <div id=\"collapsible-product\" class=\"collapse\">\n    <div class=\"collapsible-content\">\n      SKU: F-2042 &middot; Warranty: 36 months.\n      <p>Owner: Platform Team. Access level: restricted.</p>\n      <p>Priority review for this artifact is scheduled weekly.</p>\n    </div>\n  </div>\n</div>\n</div>", "html_pre_processor": "none", "css": "", "css_pre_processor": "none", "css_starter": "neither", "css_external": "https://unpkg.com/@wpmoo/ui@1.3.0/dist/assets/css/moo-ui.css;https://ui.wpmoo.org/assets/css/codepen-demo.css", "js": "", "js_pre_processor": "none", "js_external": "https://cdn.jsdelivr.net/npm/bootstrap@5.3/dist/js/bootstrap.bundle.min.js;https://ui.wpmoo.org/assets/js/codepen-demo.js", "tags": ["moo-ui", "collapsible", "components"], "editors": "110", "js_module": false}

Product review details

SKU: F-2042 · Warranty: 36 months.

Owner: Platform Team. Access level: restricted.

Priority review for this artifact is scheduled weekly.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15<div class="collapsible">
  <div class="collapsible-header">
    <h4 class="collapsible-title">Product review details</h4>
    <button class="btn btn-ghost btn-icon-sm" type="button" aria-label="Toggle product details" data-bs-toggle="collapse" data-bs-target="#collapsible-product" aria-expanded="false" aria-controls="collapsible-product">
      <i class="lucide lucide-chevrons-up-down" data-icon="inline-start" aria-hidden="true"></i>
    </button>
  </div>
  <div id="collapsible-product" class="collapse">
    <div class="collapsible-content">
      SKU: F-2042 &middot; Warranty: 36 months.
      <p>Owner: Platform Team. Access level: restricted.</p>
      <p>Priority review for this artifact is scheduled weekly.</p>
    </div>
  </div>
</div>

Collapsible

{"title": "Moo UI Collapsible - Open by default", "description": "Start open when the first render should show supporting details immediately.", "html": "<div class=\"moo-ui\" data-bs-theme=\"light\">\n<div class=\"collapsible\">\n  <div class=\"collapsible-header\">\n    <h4 class=\"collapsible-title\">Billing freeze window</h4>\n    <button class=\"btn btn-ghost btn-icon-sm\" type=\"button\" aria-label=\"Toggle billing window details\" data-bs-toggle=\"collapse\" data-bs-target=\"#collapsible-open\" aria-expanded=\"true\" aria-controls=\"collapsible-open\">\n      <svg\n        data-icon=\"inline-start\"\n        data-lucide=\"chevrons-up-down\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        aria-hidden=\"true\"\n      >\n        <path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m7 15l5 5l5-5M7 9l5-5l5 5\"/>\n      </svg>\n    </button>\n  </div>\n  <div id=\"collapsible-open\" class=\"collapse show\">\n    <div class=\"collapsible-content\">Current period locked. Manual review requested for exceptions only.</div>\n  </div>\n</div>\n</div>", "html_pre_processor": "none", "css": "", "css_pre_processor": "none", "css_starter": "neither", "css_external": "https://unpkg.com/@wpmoo/ui@1.3.0/dist/assets/css/moo-ui.css;https://ui.wpmoo.org/assets/css/codepen-demo.css", "js": "", "js_pre_processor": "none", "js_external": "https://cdn.jsdelivr.net/npm/bootstrap@5.3/dist/js/bootstrap.bundle.min.js;https://ui.wpmoo.org/assets/js/codepen-demo.js", "tags": ["moo-ui", "collapsible", "components"], "editors": "110", "js_module": false}

Billing freeze window

Current period locked. Manual review requested for exceptions only.

1
2
3
4
5
6
7
8
9
10
11<div class="collapsible">
  <div class="collapsible-header">
    <h4 class="collapsible-title">Billing freeze window</h4>
    <button class="btn btn-ghost btn-icon-sm" type="button" aria-label="Toggle billing window details" data-bs-toggle="collapse" data-bs-target="#collapsible-open" aria-expanded="true" aria-controls="collapsible-open">
      <i class="lucide lucide-chevrons-up-down" data-icon="inline-start" aria-hidden="true"></i>
    </button>
  </div>
  <div id="collapsible-open" class="collapse show">
    <div class="collapsible-content">Current period locked. Manual review requested for exceptions only.</div>
  </div>
</div>

المهمة: مراجعة يومية

مُسندة إلى أحمد · الموعد 17:00 · الحالة: بانتظار المراجعة.

1
2
3
4
5
6
7
8
9
10
11
12
13<div class="w-100" dir="rtl">
  <div class="collapsible">
    <div class="collapsible-header">
      <h4 class="collapsible-title">المهمة: مراجعة يومية</h4>
      <button class="btn btn-ghost btn-icon-sm" type="button" aria-label="إظهار تفاصيل المهمة" data-bs-toggle="collapse" data-bs-target="#collapsible-rtl" aria-expanded="false" aria-controls="collapsible-rtl">
        <i class="lucide lucide-chevrons-up-down" data-icon="inline-start" aria-hidden="true"></i>
      </button>
    </div>
    <div id="collapsible-rtl" class="collapse">
      <div class="collapsible-content">مُسندة إلى أحمد · الموعد 17:00 · الحالة: بانتظار المراجعة.</div>
    </div>
  </div>
</div>

משימה: ביקורת יומית

מוקצה למיכל · מועד 17:00 · סטטוס: ממתין לבדיקה.

1
2
3
4
5
6
7
8
9
10
11
12
13<div class="w-100" dir="rtl">
  <div class="collapsible">
    <div class="collapsible-header">
      <h4 class="collapsible-title">משימה: ביקורת יומית</h4>
      <button class="btn btn-ghost btn-icon-sm" type="button" aria-label="הצג פרטי משימה" data-bs-toggle="collapse" data-bs-target="#collapsible-rtl-hebrew" aria-expanded="false" aria-controls="collapsible-rtl-hebrew">
        <i class="lucide lucide-chevrons-up-down" data-icon="inline-start" aria-hidden="true"></i>
      </button>
    </div>
    <div id="collapsible-rtl-hebrew" class="collapse">
      <div class="collapsible-content">מוקצה למיכל · מועד 17:00 · סטטוס: ממתין לבדיקה.</div>
    </div>
  </div>
</div>

Task: Daily audit sync

Assigned to Support Lead · Due Thu 5 PM · Status: Pending review.

1
2
3
4
5
6
7
8
9
10
11
12
13<div class="w-100" dir="ltr">
  <div class="collapsible">
    <div class="collapsible-header">
      <h4 class="collapsible-title">Task: Daily audit sync</h4>
      <button class="btn btn-ghost btn-icon-sm" type="button" aria-label="Show task details" data-bs-toggle="collapse" data-bs-target="#collapsible-rtl-english" aria-expanded="false" aria-controls="collapsible-rtl-english">
        <i class="lucide lucide-chevrons-up-down" data-icon="inline-start" aria-hidden="true"></i>
      </button>
    </div>
    <div id="collapsible-rtl-english" class="collapse">
      <div class="collapsible-content">Assigned to Support Lead · Due Thu 5 PM · Status: Pending review.</div>
    </div>
  </div>
</div>

Component reference

Status: Accepted
Runtime: Bootstrap plugin
Markup: Moo UI documented extension
Reference: For Bootstrap's Collapse plugin behavior and accessibility notes, see the Bootstrap Collapse documentation.

Collapsible

Can I change this after saving?

Usage

Basic

Can we use this flow in operations?

Product review details

Product review details

Open by default

Billing freeze window

RTL

المهمة: مراجعة يومية

משימה: ביקורת יומית

Task: Daily audit sync

Component reference

Settings

Can I change this after saving?

Usage

Basic

Can we use this flow in operations?

Product review details

Product review details

Open by default

Billing freeze window

RTL

المهمة: مراجعة يومية

משימה: ביקורת יומית

Task: Daily audit sync

Component reference

Search documentation

Settings