Web Designer Wall

Snippets Accordion

Bootstrap 5 Status Accordion with Next Buttons

A status accordion where each step is colour-coded by state and opens one at a time, with a Next button that advances to the following panel.

Bootstrap 5 No jQuery Jul 2019 6.8K views 

<section class="wdw-stage">
  <div class="container" style="max-width:640px">
    <div class="mb-4">
      <span class="wdw-eyebrow">Launch checklist</span>
      <h2 class="wdw-heading h2 mt-2 mb-1">Project status</h2>
      <p class="wdw-muted mb-0">Open a step to read the details, then continue to the next one.</p>
    </div>
    <div class="accordion stat-acc" id="statAcc">
      <div class="accordion-item stat-primary">
        <h3 class="accordion-header"><button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#stat0" aria-expanded="true" aria-controls="stat0"><span class="stat-dot me-3" aria-hidden="true"></span><span class="fw-semibold">Project brief</span><span class="badge rounded-pill ms-auto me-3 stat-badge">To do</span></button></h3>
        <div id="stat0" class="accordion-collapse collapse show" data-bs-parent="#statAcc"><div class="accordion-body"><p class="wdw-muted">Share goals, audience and timeline so the team starts from the same page.</p><div class="d-flex justify-content-end"><button type="button" class="btn btn-primary rounded-pill px-4" data-next="#stat1">Next step →</button></div></div></div>
      </div>
      <div class="accordion-item stat-success">
        <h3 class="accordion-header"><button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#stat1" aria-expanded="false" aria-controls="stat1"><span class="stat-dot me-3" aria-hidden="true"></span><span class="fw-semibold">Design approved</span><span class="badge rounded-pill ms-auto me-3 stat-badge">Done</span></button></h3>
        <div id="stat1" class="accordion-collapse collapse" data-bs-parent="#statAcc"><div class="accordion-body"><p class="wdw-muted">Mockups were signed off. Handoff files are ready for development.</p><div class="d-flex justify-content-end"><button type="button" class="btn btn-primary rounded-pill px-4" data-next="#stat2">Next step →</button></div></div></div>
      </div>
      <div class="accordion-item stat-info">
        <h3 class="accordion-header"><button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#stat2" aria-expanded="false" aria-controls="stat2"><span class="stat-dot me-3" aria-hidden="true"></span><span class="fw-semibold">In development</span><span class="badge rounded-pill ms-auto me-3 stat-badge">Active</span></button></h3>
        <div id="stat2" class="accordion-collapse collapse" data-bs-parent="#statAcc"><div class="accordion-body"><p class="wdw-muted">Components are being built against the approved designs.</p><div class="d-flex justify-content-end"><button type="button" class="btn btn-primary rounded-pill px-4" data-next="#stat3">Next step →</button></div></div></div>
      </div>
      <div class="accordion-item stat-warning">
        <h3 class="accordion-header"><button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#stat3" aria-expanded="false" aria-controls="stat3"><span class="stat-dot me-3" aria-hidden="true"></span><span class="fw-semibold">Needs review</span><span class="badge rounded-pill ms-auto me-3 stat-badge">Review</span></button></h3>
        <div id="stat3" class="accordion-collapse collapse" data-bs-parent="#statAcc"><div class="accordion-body"><p class="wdw-muted">A few details are waiting on feedback before this can move forward.</p><div class="d-flex justify-content-end"><button type="button" class="btn btn-primary rounded-pill px-4" data-next="#stat4">Next step →</button></div></div></div>
      </div>
      <div class="accordion-item stat-danger">
        <h3 class="accordion-header"><button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#stat4" aria-expanded="false" aria-controls="stat4"><span class="stat-dot me-3" aria-hidden="true"></span><span class="fw-semibold">Blocked</span><span class="badge rounded-pill ms-auto me-3 stat-badge">Blocked</span></button></h3>
        <div id="stat4" class="accordion-collapse collapse" data-bs-parent="#statAcc"><div class="accordion-body"><p class="wdw-muted">A dependency is missing. Resolve it to continue with the launch.</p><div class="d-flex justify-content-end"><button type="button" class="btn btn-outline-primary rounded-pill px-4" data-next="#stat0">Back to start</button></div></div></div>
      </div>
    </div>
  </div>
</section>

Built on Bootstrap 5.3.8 with plain JavaScript — no jQuery. Supports light and dark mode via data-bs-theme.

Related snippets

More accordion snippets