Accordion

Bootstrap

Bootstrap accordion: expandable FAQ-style sections with one panel open per group (data-bs-parent). Markup below; default vs flush and when to use → Rules.

Default

Bordered card (accordion on --bs-accordion-border-radius). Rows divided by border-subtle. Chevron on the button rotates when open (Bootstrap accordion-button::after).

Admins and account owners. Members can view but not edit billing or ownership.

Email and in-app alerts use the same tone rules as [toasts](/components/feedback). You can dismiss each item from the drawer.

Yes — use Export on any table view; CSV includes visible columns for the current filter.

<div class="accordion" id="accordionExample">
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button
        class="accordion-button"
        type="button"
        data-bs-toggle="collapse"
        data-bs-target="#collapseOne"
        aria-expanded="true"
        aria-controls="collapseOne"
      >
        Who can change account settings?
      </button>
    </h2>
    <div
      id="collapseOne"
      class="accordion-collapse collapse show"
      data-bs-parent="#accordionExample"
    >
      <div class="accordion-body">…</div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button
        class="accordion-button collapsed"
        type="button"
        data-bs-toggle="collapse"
        data-bs-target="#collapseTwo"
        aria-expanded="false"
        aria-controls="collapseTwo"
      >
        How do notifications work?
      </button>
    </h2>
    <div
      id="collapseTwo"
      class="accordion-collapse collapse"
      data-bs-parent="#accordionExample"
    >
      <div class="accordion-body">…</div>
    </div>
  </div>
</div>

Flush

accordion accordion-flush: no outer border or radius — full-bleed dividers only. Use inside a card or panel that already defines the surface.

Admins and account owners. Members can view but not edit billing or ownership.

Email and in-app alerts use the same tone rules as [toasts](/components/feedback). You can dismiss each item from the drawer.

Yes — use Export on any table view; CSV includes visible columns for the current filter.

<div class="accordion accordion-flush" id="accordionFlush">
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button
        class="accordion-button"
        type="button"
        data-bs-toggle="collapse"
        data-bs-target="#flush-collapseOne"
        aria-expanded="true"
        aria-controls="flush-collapseOne"
      >
        Section title
      </button>
    </h2>
    <div
      id="flush-collapseOne"
      class="accordion-collapse collapse show"
      data-bs-parent="#accordionFlush"
    >
      <div class="accordion-body">…</div>
    </div>
  </div>
</div>

Rules

Default accordion

• Standalone FAQ or help blocks on page background — bordered accordion, subtle row dividers.
• One open section per group: set the same data-bs-parent on each accordion-collapse (value = root accordion id).
• Open panel: accordion-button (no collapsed) + accordion-collapse collapse show. Closed: accordion-button collapsed + collapse only.
• Active/open header uses theme selected surface + green title; chevron rotates — colour transition only, no motion tricks.

Flush accordion

• accordion accordion-flush when the parent card or panel already provides border and radius.
• Same header/collapse markup as default; often card-body p-0 so dividers run edge to edge.