<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="panel panel-default panel-table"> <div class="panel-heading"> <div class="row"> <div class="col col-xs-4"> <h3 class="panel-title"> Please Follow the form to avail Tiffin Service </h3> </div> <div class="col col-xs-8 "> <button type="button" class="btn btn-sm btn-default btn-create" id="btnstep1"> <span class="glyphicon glyphicon-pause" style="color: Green;" id="spanstep1"></span>  Delivery Details</button>    <button type="button" class="btn btn-sm btn-default btn-create" id="btnstep2" disabled> <span class="glyphicon glyphicon-stop" style="color: Red;" id="spanstep2"></span>  Service Details</button>    <button type="button" class="btn btn-sm btn-default btn-create" id="btnstep3" disabled> <span class="glyphicon glyphicon-stop" style="color: Red;" id="spanstep3"></span>   Payment</button> </div> </div> </div> <div class="panel-body"> <div id="rowpersonalinfo"> <div class="row"> Step 1 </div> <div class="row"> <label class="btn btn-success " id="btnproceedstep1"> Proceed >> </label> </div> </div> <br /> <div id="rowserviceinfo" style="display: none;"> <div class="row"> Step 2 </div> <div class="row"> <label class="btn btn-success " id="btnproceedstep2"> Proceed >> </label> </div> </div> <br /> <div id="rowpayment" style="display: none;"> <div class="row"> Step 3 </div> <div class="row"> <label class="btn btn-success " id="btnproceedstep3"> Complete </label> </div> </div> </div> <div class="panel-footer"> </div> </div> </div>

$(document).ready(function () { $("#lbltemporary").click(function () { $("#rowtemparary").slideDown(); $("#rowmonth").slideUp(); }); $("#lblmonth").click(function () { $("#rowmonth").slideDown(); $("#rowtemparary").slideUp(); }); $("#btnproceedstep1").click(function () { $("#rowserviceinfo").slideDown(); $("#rowpersonalinfo").slideUp(); $("#spanstep1").removeClass("glyphicon-pause"); $("#spanstep1").addClass("glyphicon-ok"); $("#spanstep2").removeClass("glyphicon-stop"); $("#spanstep2").addClass("glyphicon-pause"); $("#spanstep2").css("color", "Green"); $("#btnstep2").removeAttr("disabled"); $("#btnproceedstep1").css("display", "none"); }); $("#btnstep1").click(function () { $("#rowpersonalinfo").toggle(); $("#rowserviceinfo").slideUp(); $("#rowpayment").slideUp(); }); $("#btnstep2").click(function () { $("#rowserviceinfo").toggle(); $("#rowpersonalinfo").slideUp(); $("#rowpayment").slideUp(); }); $("#btnstep3").click(function () { $("#rowpayment").toggle(); $("#rowpersonalinfo").slideUp(); $("#rowserviceinfo").slideUp(); }); $("#btnproceedstep2").click(function () { $("#rowpayment").slideDown(); $("#rowserviceinfo").slideUp(); $("#rowpersonalinfo").slideUp(); $("#spanstep2").removeClass("glyphicon-pause"); $("#spanstep2").addClass("glyphicon-ok"); $("#spanstep3").removeClass("glyphicon-stop"); $("#spanstep3").addClass("glyphicon-pause"); $("#spanstep3").css("color", "Green"); $("#btnstep3").removeAttr("disabled"); $("#btnproceedstep2").css("display", "none"); }); }); </script>