A bootstrap 3 step wizard used with accordions.

How to used :

Add with jQuery library and bootstrap library.

Here, We’re adding jQuery Library files Of Javascript and CSS files into the existing code.

<script src="/cdn/jquery-1.12.4.min.js"></script>
<link href="/cdn/bs3/bootstrap.min.css" />
<script src="/cdn/bs3/bootstrap.min.js "></script>

Add Html Code for bootstrap Accordion With Step Wizard

<div class="panel-group" id="checkout-accordion">
      <div class="panel panel-default checkout-panel" id="panel-billing">
        <div class="panel-heading checkout-heading" id="panel-billing-heading" data-toggle="collapse" data-parent="#checkout-accordion" href="#collapse-billing">
          <h4 class="panel-title checkout-acc-title">
            <a>How much money do you need?</a>
          </h4>
        </div>
        <div id="collapse-billing" class="panel-collapse details collapse in">
          <div class="panel-body checkout-inside">
                <input type="text" name="">
                        <button id="toggle-delivery" type="button" class="btn-checkout" data-toggle="collapse" data-parent="#checkout-accordion" href="#collapse-delivery2">Next</button>
          </div>
        </div>
      </div>
</div>

Add Step wizard Script

//Remove href from shipping and payment from start
      $("#panel-shipping-heading").removeAttr("href").css('color', 'gray')
      $("#panel-payment-heading").removeAttr("href").css('color', 'gray')
    
     //after delivery is shown, add href
      $('#collapse-delivery2').on('show.bs.collapse', function () {
        $("#panel-shipping-heading").attr("href", "#collapse-delivery2").css('color', 'black')
      })
      
      //after payment is shown, add href
      $('#collapse-payment').on('show.bs.collapse', function () {
        $("#panel-payment-heading").attr("href", "#collapse-payment").css('color', 'black')
      })
      

Done