Web Designer Wall

Snippets Accordion

Bootstrap 5 Nested Accordion with Vertical Steps

A two-level accordion where each bank expands into payment methods, and each method reveals a numbered vertical step-by-step guide.

Bootstrap 5 No jQuery Jul 2019 6.9K views 

<section class="wdw-stage na-stage">
  <div class="container" style="max-width:720px">
    <div class="mb-4"><span class="wdw-eyebrow">Top up</span><h2 class="wdw-heading h3 mb-1">How to add funds</h2><p class="wdw-muted mb-0">Choose your bank, then the way you want to pay.</p></div>
    <div class="accordion na-outer" id="na-banks">
      <div class="accordion-item">
        <h3 class="accordion-header"><button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#na-bca" aria-expanded="true" aria-controls="na-bca"><span class="na-bank me-3"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 10l9-6 9 6M5 10v8M9.5 10v8M14.5 10v8M19 10v8M3 21h18"/></svg></span><span><span class="d-block fw-bold">BCA</span><span class="d-block small wdw-muted fw-normal">Virtual account</span></span></button></h3>
        <div id="na-bca" class="accordion-collapse collapse show" data-bs-parent="#na-banks">
          <div class="accordion-body pt-2">
            <div class="accordion na-inner" id="na-bca-m">
              <div class="accordion-item">
                <h4 class="accordion-header"><button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#na-bca-0" aria-expanded="false" aria-controls="na-bca-0">ATM<span class="badge rounded-pill bg-body text-body-secondary border ms-2 fw-semibold">5 steps</span></button></h4>
                <div id="na-bca-0" class="accordion-collapse collapse" data-bs-parent="#na-bca-m">
                  <div class="accordion-body">
                    <ol class="na-steps list-unstyled mb-0">
                      <li>Insert your ATM card and enter your PIN.</li>
                      <li>Open the Transfer menu and choose BCA Virtual Account.</li>
                      <li>Enter company code 70001 followed by your registered phone number.</li>
                      <li>Enter the amount you want to top up.</li>
                      <li>Follow the prompts to confirm the transaction.</li>
                    </ol>
                  </div>
                </div>
              </div>
              <div class="accordion-item">
                <h4 class="accordion-header"><button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#na-bca-1" aria-expanded="false" aria-controls="na-bca-1">Mobile banking<span class="badge rounded-pill bg-body text-body-secondary border ms-2 fw-semibold">4 steps</span></button></h4>
                <div id="na-bca-1" class="accordion-collapse collapse" data-bs-parent="#na-bca-m">
                  <div class="accordion-body">
                    <ol class="na-steps list-unstyled mb-0">
                      <li>Sign in to the BCA mobile app.</li>
                      <li>Tap m-Transfer, then BCA Virtual Account.</li>
                      <li>Enter company code 70001 and your phone number.</li>
                      <li>Review the amount and enter your PIN.</li>
                    </ol>
                  </div>
                </div>
              </div>
              <div class="accordion-item">
                <h4 class="accordion-header"><button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#na-bca-2" aria-expanded="false" aria-controls="na-bca-2">Internet banking<span class="badge rounded-pill bg-body text-body-secondary border ms-2 fw-semibold">4 steps</span></button></h4>
                <div id="na-bca-2" class="accordion-collapse collapse" data-bs-parent="#na-bca-m">
                  <div class="accordion-body">
                    <ol class="na-steps list-unstyled mb-0">
                      <li>Log in to KlikBCA with your user ID.</li>
                      <li>Choose Fund Transfer, then Transfer to BCA Virtual Account.</li>
                      <li>Enter the virtual account number and the amount.</li>
                      <li>Confirm with your token.</li>
                    </ol>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="accordion-item">
        <h3 class="accordion-header"><button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#na-mdr" aria-expanded="false" aria-controls="na-mdr"><span class="na-bank me-3"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 10l9-6 9 6M5 10v8M9.5 10v8M14.5 10v8M19 10v8M3 21h18"/></svg></span><span><span class="d-block fw-bold">Mandiri</span><span class="d-block small wdw-muted fw-normal">Bill payment</span></span></button></h3>
        <div id="na-mdr" class="accordion-collapse collapse" data-bs-parent="#na-banks">
          <div class="accordion-body pt-2">
            <div class="accordion na-inner" id="na-mdr-m">
              <div class="accordion-item">
                <h4 class="accordion-header"><button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#na-mdr-0" aria-expanded="false" aria-controls="na-mdr-0">ATM<span class="badge rounded-pill bg-body text-body-secondary border ms-2 fw-semibold">4 steps</span></button></h4>
                <div id="na-mdr-0" class="accordion-collapse collapse" data-bs-parent="#na-mdr-m">
                  <div class="accordion-body">
                    <ol class="na-steps list-unstyled mb-0">
                      <li>Insert your card and enter your PIN.</li>
                      <li>Choose Payment, then Multi Payment.</li>
                      <li>Enter company code 88708 and your phone number.</li>
                      <li>Confirm the details and finish the payment.</li>
                    </ol>
                  </div>
                </div>
              </div>
              <div class="accordion-item">
                <h4 class="accordion-header"><button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#na-mdr-1" aria-expanded="false" aria-controls="na-mdr-1">Mobile banking<span class="badge rounded-pill bg-body text-body-secondary border ms-2 fw-semibold">4 steps</span></button></h4>
                <div id="na-mdr-1" class="accordion-collapse collapse" data-bs-parent="#na-mdr-m">
                  <div class="accordion-body">
                    <ol class="na-steps list-unstyled mb-0">
                      <li>Open the Livin' app and sign in.</li>
                      <li>Tap Pay, then search for the company code 88708.</li>
                      <li>Enter your phone number and the top-up amount.</li>
                      <li>Authorise with your PIN.</li>
                    </ol>
                  </div>
                </div>
              </div>
            </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.

Free to use in personal and commercial projects under the MIT license.

Related snippets

More accordion snippets