Skip to component content

Accordion

Reveal one section of content at a time using Bootstrap's Collapse plugin.

Use the open panel for the information people need first. Keep the content brief enough to scan before moving to the next section.

Collapse supporting history until someone needs to inspect the decision trail.

Keep the next owner and follow-up notes close to the same request.

Usage

Use .accordion for a vertical set of disclosure sections where each header toggles its own panel. The structure follows Bootstrap's Collapse behavior: an .accordion-button controls an .accordion-collapse region with data-bs-toggle="collapse", data-bs-target, aria-expanded, and aria-controls, while the revealed content sits inside .accordion-body.

Keep the default one-open-at-a-time behavior by grouping items with data-bs-parent; omit data-bs-parent when multiple panels should stay open together. To render a panel open on first paint, add .show to the .accordion-collapse, remove .collapsed from the matching .accordion-button, and set aria-expanded="true".

Use .accordion-flush when the accordion should sit edge-to-edge inside its parent without the standard outer borders and radius. Because Accordion is powered by Bootstrap's Collapse plugin, keep button and panel ids stable, keep heading order meaningful, and let Bootstrap honor reduced-motion preferences for the expand/collapse animation.

Basic

Only one item stays open at a time; opening another closes the current one.

Accordion

Requests with customer-facing blockers move to the top of the queue. Routine copy or metadata changes stay grouped for the next review window.

The request is archived, the workspace owner is notified, and follow-up tasks stay attached to the same audit trail.

Administrators and assigned reviewers can reopen a request when the customer adds new evidence.
<div class="accordion w-100 accordion-flush" id="accordion-basic">
  <div class="accordion-item">
    <h3 class="accordion-header">
      <button class="accordion-button" type="button" id="accordion-basic-priority-trigger" data-bs-toggle="collapse" data-bs-target="#accordion-basic-priority" aria-expanded="true" aria-controls="accordion-basic-priority">
        <span>How are review requests prioritized?</span>
        <i class="lucide lucide-chevron-down" data-icon="inline-end" aria-hidden="true"></i>
      </button>
    </h3>
    <div id="accordion-basic-priority" class="accordion-collapse collapse show" data-bs-parent="#accordion-basic" aria-labelledby="accordion-basic-priority-trigger">
      <div class="accordion-body">Requests with customer-facing blockers move to the top of the queue. Routine copy or metadata changes stay grouped for the next review window.</div>
    </div>
  </div>
  <div class="accordion-item">
    <h3 class="accordion-header">
      <button class="accordion-button collapsed" type="button" id="accordion-basic-approval-trigger" data-bs-toggle="collapse" data-bs-target="#accordion-basic-approval" aria-expanded="false" aria-controls="accordion-basic-approval">
        <span>What happens after approval?</span>
        <i class="lucide lucide-chevron-down" data-icon="inline-end" aria-hidden="true"></i>
      </button>
    </h3>
    <div id="accordion-basic-approval" class="accordion-collapse collapse" data-bs-parent="#accordion-basic" aria-labelledby="accordion-basic-approval-trigger">
      <div class="accordion-body">The request is archived, the workspace owner is notified, and follow-up tasks stay attached to the same audit trail.</div>
    </div>
  </div>
  <div class="accordion-item">
    <h3 class="accordion-header">
      <button class="accordion-button collapsed" type="button" id="accordion-basic-reopen-trigger" data-bs-toggle="collapse" data-bs-target="#accordion-basic-reopen" aria-expanded="false" aria-controls="accordion-basic-reopen">
        <span>Who can reopen a closed request?</span>
        <i class="lucide lucide-chevron-down" data-icon="inline-end" aria-hidden="true"></i>
      </button>
    </h3>
    <div id="accordion-basic-reopen" class="accordion-collapse collapse" data-bs-parent="#accordion-basic" aria-labelledby="accordion-basic-reopen-trigger">
      <div class="accordion-body">Administrators and assigned reviewers can reopen a request when the customer adds new evidence.</div>
    </div>
  </div>
</div>

Multiple

Set always_open=true to let more than one item stay open at the same time.

Accordion

Identity, contact, and billing records passed the nightly validation.

Two uploaded files are waiting for the operations team.

The customer success team will receive a summary when all open checks pass.
<div class="accordion w-100 accordion-flush" id="accordion-multiple">
  <div class="accordion-item">
    <h3 class="accordion-header">
      <button class="accordion-button" type="button" id="accordion-multiple-intake-trigger" data-bs-toggle="collapse" data-bs-target="#accordion-multiple-intake" aria-expanded="true" aria-controls="accordion-multiple-intake">
        <span>Intake checks</span>
        <i class="lucide lucide-chevron-down" data-icon="inline-end" aria-hidden="true"></i>
      </button>
    </h3>
    <div id="accordion-multiple-intake" class="accordion-collapse collapse show" aria-labelledby="accordion-multiple-intake-trigger">
      <div class="accordion-body">Identity, contact, and billing records passed the nightly validation.</div>
    </div>
  </div>
  <div class="accordion-item">
    <h3 class="accordion-header">
      <button class="accordion-button" type="button" id="accordion-multiple-documents-trigger" data-bs-toggle="collapse" data-bs-target="#accordion-multiple-documents" aria-expanded="true" aria-controls="accordion-multiple-documents">
        <span>Document review</span>
        <i class="lucide lucide-chevron-down" data-icon="inline-end" aria-hidden="true"></i>
      </button>
    </h3>
    <div id="accordion-multiple-documents" class="accordion-collapse collapse show" aria-labelledby="accordion-multiple-documents-trigger">
      <div class="accordion-body">Two uploaded files are waiting for the operations team.</div>
    </div>
  </div>
  <div class="accordion-item">
    <h3 class="accordion-header">
      <button class="accordion-button collapsed" type="button" id="accordion-multiple-handoff-trigger" data-bs-toggle="collapse" data-bs-target="#accordion-multiple-handoff" aria-expanded="false" aria-controls="accordion-multiple-handoff">
        <span>Handoff notes</span>
        <i class="lucide lucide-chevron-down" data-icon="inline-end" aria-hidden="true"></i>
      </button>
    </h3>
    <div id="accordion-multiple-handoff" class="accordion-collapse collapse" aria-labelledby="accordion-multiple-handoff-trigger">
      <div class="accordion-body">The customer success team will receive a summary when all open checks pass.</div>
    </div>
  </div>
</div>

Bordered

Use a bordered accordion for policy blocks that sit directly on surface boundaries.

Accordion

Invoicing is calculated at the end of each cycle. You can switch between monthly and annual plans, and the next renewal date is shown in the workspace summary.

Payment-method updates are logged and require one administrator confirmation before they are applied.

Services move into a grace state and suspend after the grace period if the card cannot be recovered.
<div class="accordion w-100" id="accordion-borders">
  <div class="accordion-item">
    <h3 class="accordion-header">
      <button class="accordion-button collapsed" type="button" id="accordion-borders-plan-trigger" data-bs-toggle="collapse" data-bs-target="#accordion-borders-plan" aria-expanded="false" aria-controls="accordion-borders-plan">
        <span>How does workspace billing work?</span>
        <i class="lucide lucide-chevron-down" data-icon="inline-end" aria-hidden="true"></i>
      </button>
    </h3>
    <div id="accordion-borders-plan" class="accordion-collapse collapse" data-bs-parent="#accordion-borders" aria-labelledby="accordion-borders-plan-trigger">
      <div class="accordion-body">Invoicing is calculated at the end of each cycle. You can switch between monthly and annual plans, and the next renewal date is shown in the workspace summary.</div>
    </div>
  </div>
  <div class="accordion-item">
    <h3 class="accordion-header">
      <button class="accordion-button collapsed" type="button" id="accordion-borders-security-trigger" data-bs-toggle="collapse" data-bs-target="#accordion-borders-security" aria-expanded="false" aria-controls="accordion-borders-security">
        <span>Are billing changes reviewed?</span>
        <i class="lucide lucide-chevron-down" data-icon="inline-end" aria-hidden="true"></i>
      </button>
    </h3>
    <div id="accordion-borders-security" class="accordion-collapse collapse" data-bs-parent="#accordion-borders" aria-labelledby="accordion-borders-security-trigger">
      <div class="accordion-body">Payment-method updates are logged and require one administrator confirmation before they are applied.</div>
    </div>
  </div>
  <div class="accordion-item">
    <h3 class="accordion-header">
      <button class="accordion-button collapsed" type="button" id="accordion-borders-support-trigger" data-bs-toggle="collapse" data-bs-target="#accordion-borders-support" aria-expanded="false" aria-controls="accordion-borders-support">
        <span>What happens on a failed charge?</span>
        <i class="lucide lucide-chevron-down" data-icon="inline-end" aria-hidden="true"></i>
      </button>
    </h3>
    <div id="accordion-borders-support" class="accordion-collapse collapse" data-bs-parent="#accordion-borders" aria-labelledby="accordion-borders-support-trigger">
      <div class="accordion-body">Services move into a grace state and suspend after the grace period if the card cannot be recovered.</div>
    </div>
  </div>
</div>

Disabled

Set disabled on an item to remove it from keyboard and pointer interaction.

Accordion

Owners can move a workspace to another internal administrator.

Policy changes are locked while the legal hold is active.

Exports include request status, reviewer notes, and attachment metadata.
<div class="accordion w-100 accordion-flush" id="accordion-disabled">
  <div class="accordion-item">
    <h3 class="accordion-header">
      <button class="accordion-button collapsed" type="button" id="accordion-disabled-owner-trigger" data-bs-toggle="collapse" data-bs-target="#accordion-disabled-owner" aria-expanded="false" aria-controls="accordion-disabled-owner">
        <span>Transfer workspace ownership</span>
        <i class="lucide lucide-chevron-down" data-icon="inline-end" aria-hidden="true"></i>
      </button>
    </h3>
    <div id="accordion-disabled-owner" class="accordion-collapse collapse" data-bs-parent="#accordion-disabled" aria-labelledby="accordion-disabled-owner-trigger">
      <div class="accordion-body">Owners can move a workspace to another internal administrator.</div>
    </div>
  </div>
  <div class="accordion-item">
    <h3 class="accordion-header">
      <button class="accordion-button collapsed text-muted" type="button" id="accordion-disabled-retention-trigger" data-bs-toggle="collapse" data-bs-target="#accordion-disabled-retention" aria-expanded="false" aria-controls="accordion-disabled-retention" disabled>
        <span>Change retention policy</span>
        <i class="lucide lucide-chevron-down" data-icon="inline-end" aria-hidden="true"></i>
      </button>
    </h3>
    <div id="accordion-disabled-retention" class="accordion-collapse collapse" data-bs-parent="#accordion-disabled" aria-labelledby="accordion-disabled-retention-trigger">
      <div class="accordion-body">Policy changes are locked while the legal hold is active.</div>
    </div>
  </div>
  <div class="accordion-item">
    <h3 class="accordion-header">
      <button class="accordion-button collapsed" type="button" id="accordion-disabled-export-trigger" data-bs-toggle="collapse" data-bs-target="#accordion-disabled-export" aria-expanded="false" aria-controls="accordion-disabled-export">
        <span>Export audit history</span>
        <i class="lucide lucide-chevron-down" data-icon="inline-end" aria-hidden="true"></i>
      </button>
    </h3>
    <div id="accordion-disabled-export" class="accordion-collapse collapse" data-bs-parent="#accordion-disabled" aria-labelledby="accordion-disabled-export-trigger">
      <div class="accordion-body">Exports include request status, reviewer notes, and attachment metadata.</div>
    </div>
  </div>
</div>

In a card

Wrap the accordion in a card for settings surfaces that need a clearer container boundary.

Accordion

Workspace billing

Plan, invoice, and cancellation questions for operations teams.

Small teams usually start with shared operations, then move to dedicated review seats when approval volume grows.

Invoices are grouped by workspace and include the renewal window, seats, and any service adjustments.

Owners can cancel renewal at any time. Active service continues until the current billing period ends.
<div class="card">
  <div class="card-header">
    <div class="card-header__text">
      <h3 class="card-title">Workspace billing</h3>
      <p class="card-subtitle">Plan, invoice, and cancellation questions for operations teams.</p>
    </div>
  </div>
  <div class="card-body">
    <div class="accordion w-100 accordion-flush" id="accordion-in-card">
      <div class="accordion-item">
        <h3 class="accordion-header">
          <button class="accordion-button" type="button" id="accordion-in-card-plan-trigger" data-bs-toggle="collapse" data-bs-target="#accordion-in-card-plan" aria-expanded="true" aria-controls="accordion-in-card-plan">
            <span>Which plan should a team choose?</span>
            <i class="lucide lucide-chevron-down" data-icon="inline-end" aria-hidden="true"></i>
          </button>
        </h3>
        <div id="accordion-in-card-plan" class="accordion-collapse collapse show" data-bs-parent="#accordion-in-card" aria-labelledby="accordion-in-card-plan-trigger">
          <div class="accordion-body">Small teams usually start with shared operations, then move to dedicated review seats when approval volume grows.</div>
        </div>
      </div>
      <div class="accordion-item">
        <h3 class="accordion-header">
          <button class="accordion-button collapsed" type="button" id="accordion-in-card-invoice-trigger" data-bs-toggle="collapse" data-bs-target="#accordion-in-card-invoice" aria-expanded="false" aria-controls="accordion-in-card-invoice">
            <span>How are invoices reviewed?</span>
            <i class="lucide lucide-chevron-down" data-icon="inline-end" aria-hidden="true"></i>
          </button>
        </h3>
        <div id="accordion-in-card-invoice" class="accordion-collapse collapse" data-bs-parent="#accordion-in-card" aria-labelledby="accordion-in-card-invoice-trigger">
          <div class="accordion-body">Invoices are grouped by workspace and include the renewal window, seats, and any service adjustments.</div>
        </div>
      </div>
      <div class="accordion-item">
        <h3 class="accordion-header">
          <button class="accordion-button collapsed" type="button" id="accordion-in-card-cancel-trigger" data-bs-toggle="collapse" data-bs-target="#accordion-in-card-cancel" aria-expanded="false" aria-controls="accordion-in-card-cancel">
            <span>Can a workspace cancel immediately?</span>
            <i class="lucide lucide-chevron-down" data-icon="inline-end" aria-hidden="true"></i>
          </button>
        </h3>
        <div id="accordion-in-card-cancel" class="accordion-collapse collapse" data-bs-parent="#accordion-in-card" aria-labelledby="accordion-in-card-cancel-trigger">
          <div class="accordion-body">Owners can cancel renewal at any time. Active service continues until the current billing period ends.</div>
        </div>
      </div>
    </div>
  </div>
</div>

RTL

Use tabs to compare Arabic, Hebrew, and English accordions without custom mirrored CSS.

تبقى العوائق التي تؤثر على العملاء في أعلى قائمة المراجعة.

يُرسل الملخص بعد اجتياز الفحوصات المطلوبة.

يؤكد مسؤول مساحة العمل النتيجة قبل الإغلاق.
<div class="w-100" dir="rtl">
  <div class="accordion w-100 accordion-flush" id="accordion-rtl-arabic">
    <div class="accordion-item">
      <h3 class="accordion-header">
        <button class="accordion-button" type="button" id="accordion-rtl-arabic-priority-trigger" data-bs-toggle="collapse" data-bs-target="#accordion-rtl-arabic-priority" aria-expanded="true" aria-controls="accordion-rtl-arabic-priority">
          <span>كيف تُرتب الطلبات؟</span>
          <i class="lucide lucide-chevron-down" data-icon="inline-end" aria-hidden="true"></i>
        </button>
      </h3>
      <div id="accordion-rtl-arabic-priority" class="accordion-collapse collapse show" data-bs-parent="#accordion-rtl-arabic" aria-labelledby="accordion-rtl-arabic-priority-trigger">
        <div class="accordion-body">تبقى العوائق التي تؤثر على العملاء في أعلى قائمة المراجعة.</div>
      </div>
    </div>
    <div class="accordion-item">
      <h3 class="accordion-header">
        <button class="accordion-button collapsed" type="button" id="accordion-rtl-arabic-summary-trigger" data-bs-toggle="collapse" data-bs-target="#accordion-rtl-arabic-summary" aria-expanded="false" aria-controls="accordion-rtl-arabic-summary">
          <span>متى نرسل الملخص؟</span>
          <i class="lucide lucide-chevron-down" data-icon="inline-end" aria-hidden="true"></i>
        </button>
      </h3>
      <div id="accordion-rtl-arabic-summary" class="accordion-collapse collapse" data-bs-parent="#accordion-rtl-arabic" aria-labelledby="accordion-rtl-arabic-summary-trigger">
        <div class="accordion-body">يُرسل الملخص بعد اجتياز الفحوصات المطلوبة.</div>
      </div>
    </div>
    <div class="accordion-item">
      <h3 class="accordion-header">
        <button class="accordion-button collapsed" type="button" id="accordion-rtl-arabic-reviewer-trigger" data-bs-toggle="collapse" data-bs-target="#accordion-rtl-arabic-reviewer" aria-expanded="false" aria-controls="accordion-rtl-arabic-reviewer">
          <span>من يعتمد النتيجة؟</span>
          <i class="lucide lucide-chevron-down" data-icon="inline-end" aria-hidden="true"></i>
        </button>
      </h3>
      <div id="accordion-rtl-arabic-reviewer" class="accordion-collapse collapse" data-bs-parent="#accordion-rtl-arabic" aria-labelledby="accordion-rtl-arabic-reviewer-trigger">
        <div class="accordion-body">يؤكد مسؤول مساحة العمل النتيجة قبل الإغلاق.</div>
      </div>
    </div>
  </div>
</div>

חסימות שמשפיעות על לקוחות נשארות בראש תור הביקורת.

הסיכום נשלח אחרי שהבדיקות הנדרשות עוברות.

מנהל סביבת עבודה מאשר את התוצאה לפני הסגירה.
<div class="w-100" dir="rtl">
  <div class="accordion w-100 accordion-flush" id="accordion-rtl-hebrew">
    <div class="accordion-item">
      <h3 class="accordion-header">
        <button class="accordion-button" type="button" id="accordion-rtl-hebrew-priority-trigger" data-bs-toggle="collapse" data-bs-target="#accordion-rtl-hebrew-priority" aria-expanded="true" aria-controls="accordion-rtl-hebrew-priority">
          <span>איך ממיינים בקשות?</span>
          <i class="lucide lucide-chevron-down" data-icon="inline-end" aria-hidden="true"></i>
        </button>
      </h3>
      <div id="accordion-rtl-hebrew-priority" class="accordion-collapse collapse show" data-bs-parent="#accordion-rtl-hebrew" aria-labelledby="accordion-rtl-hebrew-priority-trigger">
        <div class="accordion-body">חסימות שמשפיעות על לקוחות נשארות בראש תור הביקורת.</div>
      </div>
    </div>
    <div class="accordion-item">
      <h3 class="accordion-header">
        <button class="accordion-button collapsed" type="button" id="accordion-rtl-hebrew-summary-trigger" data-bs-toggle="collapse" data-bs-target="#accordion-rtl-hebrew-summary" aria-expanded="false" aria-controls="accordion-rtl-hebrew-summary">
          <span>מתי שולחים סיכום?</span>
          <i class="lucide lucide-chevron-down" data-icon="inline-end" aria-hidden="true"></i>
        </button>
      </h3>
      <div id="accordion-rtl-hebrew-summary" class="accordion-collapse collapse" data-bs-parent="#accordion-rtl-hebrew" aria-labelledby="accordion-rtl-hebrew-summary-trigger">
        <div class="accordion-body">הסיכום נשלח אחרי שהבדיקות הנדרשות עוברות.</div>
      </div>
    </div>
    <div class="accordion-item">
      <h3 class="accordion-header">
        <button class="accordion-button collapsed" type="button" id="accordion-rtl-hebrew-reviewer-trigger" data-bs-toggle="collapse" data-bs-target="#accordion-rtl-hebrew-reviewer" aria-expanded="false" aria-controls="accordion-rtl-hebrew-reviewer">
          <span>מי מאשר סופית?</span>
          <i class="lucide lucide-chevron-down" data-icon="inline-end" aria-hidden="true"></i>
        </button>
      </h3>
      <div id="accordion-rtl-hebrew-reviewer" class="accordion-collapse collapse" data-bs-parent="#accordion-rtl-hebrew" aria-labelledby="accordion-rtl-hebrew-reviewer-trigger">
        <div class="accordion-body">מנהל סביבת עבודה מאשר את התוצאה לפני הסגירה.</div>
      </div>
    </div>
  </div>
</div>

Customer-facing blockers stay at the top of the review queue.

The summary goes out after the required checks pass.

A workspace admin confirms the result before closure.
<div class="w-100" dir="ltr">
  <div class="accordion w-100 accordion-flush" id="accordion-rtl-english">
    <div class="accordion-item">
      <h3 class="accordion-header">
        <button class="accordion-button" type="button" id="accordion-rtl-english-priority-trigger" data-bs-toggle="collapse" data-bs-target="#accordion-rtl-english-priority" aria-expanded="true" aria-controls="accordion-rtl-english-priority">
          <span>How are requests ordered?</span>
          <i class="lucide lucide-chevron-down" data-icon="inline-end" aria-hidden="true"></i>
        </button>
      </h3>
      <div id="accordion-rtl-english-priority" class="accordion-collapse collapse show" data-bs-parent="#accordion-rtl-english" aria-labelledby="accordion-rtl-english-priority-trigger">
        <div class="accordion-body">Customer-facing blockers stay at the top of the review queue.</div>
      </div>
    </div>
    <div class="accordion-item">
      <h3 class="accordion-header">
        <button class="accordion-button collapsed" type="button" id="accordion-rtl-english-summary-trigger" data-bs-toggle="collapse" data-bs-target="#accordion-rtl-english-summary" aria-expanded="false" aria-controls="accordion-rtl-english-summary">
          <span>When is the summary sent?</span>
          <i class="lucide lucide-chevron-down" data-icon="inline-end" aria-hidden="true"></i>
        </button>
      </h3>
      <div id="accordion-rtl-english-summary" class="accordion-collapse collapse" data-bs-parent="#accordion-rtl-english" aria-labelledby="accordion-rtl-english-summary-trigger">
        <div class="accordion-body">The summary goes out after the required checks pass.</div>
      </div>
    </div>
    <div class="accordion-item">
      <h3 class="accordion-header">
        <button class="accordion-button collapsed" type="button" id="accordion-rtl-english-reviewer-trigger" data-bs-toggle="collapse" data-bs-target="#accordion-rtl-english-reviewer" aria-expanded="false" aria-controls="accordion-rtl-english-reviewer">
          <span>Who signs off?</span>
          <i class="lucide lucide-chevron-down" data-icon="inline-end" aria-hidden="true"></i>
        </button>
      </h3>
      <div id="accordion-rtl-english-reviewer" class="accordion-collapse collapse" data-bs-parent="#accordion-rtl-english" aria-labelledby="accordion-rtl-english-reviewer-trigger">
        <div class="accordion-body">A workspace admin confirms the result before closure.</div>
      </div>
    </div>
  </div>
</div>

Component reference

Status
Accepted
Runtime
Bootstrap plugin
Markup
Bootstrap/native HTML
Reference

For Bootstrap's Collapse plugin behavior and accessibility notes, see the Bootstrap Accordion documentation.

Pages
Home Introduction Installation Layout Examples Account Appearance FAQ Forgot Password Overview Pricing Profile Sign In Sign Up Tasks Users Components Blocks Charts Utilities Support & Evidence Contributing AI Usage Changelog License
Components
Accordion Alert Alert Dialog Avatar Badge Breadcrumb Button Button Group Card Chart Checkbox Close Button Collapsible Combobox Context Menu Data Table Date Picker Dialog Dropdown Menu Empty Field Form Input Input Group Kbd Menubar Native Select Navigation Pagination Popover Progress Radio Group Separator Sheet Sidebar Skeleton Slider Spinner Switch Table Table of Contents Tabs Textarea Toast Toggle Group Tooltip Typography
Utilities
Border Scroll Fade
Blocks
Accordion Panels Sidebar (Floating) Sidebar (Inset)
↵ Go to Page

Settings

Theme
Choose how Moo UI looks on this device.
Sidebar
Choose how the sidebar sits on the page.
Theme Builder
Tune catalog tokens and chart colors for this browser.
Base color
Theme color
Chart color
Heading font
Body font
Radius
Direction
Choose the reading direction. RTL flips the layout live.
Reset

Restore the default appearance.