<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 ----------> <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"> <div class="container"> <div class="panel-group" id="accordion"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapse0"> <div class="row"> <div class="col-md-1"><div class="step s0">1</div></div> <div class="col-md-11 step-text">Selecciona la empresa a la que vas a realizar el cargue de información de nómina</div> </div> </a> </h4> </div> <div id="collapse0" class="panel-collapse collapse in"> <div class="panel-body"> <div class="line-wizard l1"></div> <div class="row"> <div class="col-md-1"></div> <div class="col-md-11 step-text"> <div class="form-group"> <select class="form-control" id="sel1"> <option>Selecciones una empresa...</option> <option>Avianca 1</option> <option>Avianca 2</option> <option>Avianca 3</option> </select> </div> <div class="row pull-right"> <div class="col-md-1"> <div class ="step-fll-prev step-prev prev" num-step="0"><i class="fa fa-angle-left" aria-hidden="true"></i></div> </div> <div class="col-md-1"></div> <div class="col-md-1"> <div class ="step-fll-prev step-fll next" num-step="0"><i class="fa fa-angle-right" aria-hidden="true" ></i></div> </div> </div> </div> </div> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapse1"> <div class="row"> <div class="col-md-1"><div class="step s1">2</div></div> <div class="col-md-11 step-text">Selecciona el archivo de nómina de la empresa que seleccionaste previamente</div> </div> </a> </h4> </div> <div id="collapse1" class="panel-collapse collapse"> <div class="panel-body"> <div class="line-wizard l2"></div> <div class="row"> <div class="col-md-1"></div> <div class="col-md-11 step-text"> <div class="form-group"> <input class="form-control" id="input-1" type="file" class="file"> </div> <div class="row pull-right"> <div class="col-md-1"> <div class ="step-fll-prev step-prev prev" num-step="1"><i class="fa fa-angle-left" aria-hidden="true"></i></div> </div> <div class="col-md-1"></div> <div class="col-md-1"> <div class ="step-fll-prev step-fll next" num-step="1"><i class="fa fa-angle-right" aria-hidden="true" ></i></div> </div> </div> </div> </div> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapse2"> <div class="row"> <div class="col-md-1"><div class="step s3">3</div></div> <div class="col-md-11 step-text">Selecciona la simulación masiva a la que quieres agrupar la información que estas seleccionando o ingresa un nuevo nombre</div> </div> </a> </h4> </div> <div id="collapse2" class="panel-collapse collapse"> <div class="panel-body"> <div class="line-wizard l3"></div> <div class="row"> <div class="col-md-1"></div> <div class="col-md-11 step-text"> <div class="form-group"> <input class="form-control" id="input-1" type="text" class="file" value="GRUPO FINANCIERO"> </div> <div class="row pull-right"> <div class="col-md-5"> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong"> <img src="{{ asset('/img/procesar.svg') }}" style="width:21px; margin: 1px;" alt=""> Procesar</button> </div> <div class="col-md-5"> <button type="button" class="btn btn-secondary"> <img src="{{ asset('/img/cancelar.svg') }}" style="width:21px; margin: 1px;" alt=""> Cancelar</button> </div> </div> </div> </div> </div> </div> </div> </div> </div>

.step { width: 50px; height: 50px; border-radius: 50%; font-family: 'SansaPro-SemiBold'; font-size: 25px; color: #fff; line-height: 50px; text-align: center !important; background: #FF0000; transition: all 1s; } .step-ok { width: 50px; height: 50px; border-radius: 50%; font-family: 'SansaPro-SemiBold'; font-size: 25px; color: #fff; line-height: 50px; text-align: center !important; background: #39B54A; } .step-fll-prev { width: 40px; height: 40px; border-radius: 50%; font-family: 'SansaPro-Bold'; font-size: 30px !important; text-align: center !important; cursor: pointer; } .step-fll { color: #fff; background: #283897; margin-left: 3px; line-height: 38px; } .step-prev { color: #283897; background: #FFF; border-width: 2px; border-style: solid; border-color: #283897; margin-left: -5px; line-height: 35px; } .step-fll-prev i { font-size: 30px !important; } .step-text { /*font-family: 'SansaPro-SemiBold';*/ font-size: 15px; padding-left: 46px; padding-top: 5px; } .panel-default { border-color: transparent; } .panel { margin-bottom: 20px; background-color: transparent; border: 0px solid transparent; border-radius: 4px; -webkit-box-shadow: 0 0px 0px rgba(0,0,0,0.05); box-shadow: 0 0px 0px rgba(0,0,0,0.05); } .panel-default>.panel-heading { color: #333; background-color: transparent; border-color: transparent; } .panel-group .panel-heading+.panel-collapse .panel-body { border-top: 0px solid #ddd; } .line-wizard { position: absolute; width: 2px; background-color: #CCCCCC; z-index: -1; } .l1 { height: 214px; margin-top: -44px; margin-left: 25px; } .l2 { height: 217px; margin-top: -45px; margin-left: 25px; } .l3 { height: 131px; margin-top: -199px; margin-left: 25px; }

$(function() { $('.next').click(function() { var numStep = $(this).attr( "num-step" ); var clStep = '#collapse' + (parseInt(numStep) + 1); $(clStep).collapse('show'); $('#accordion .in').collapse('hide'); console.log(clStep); /*cambiar estilo e imagen a botón*/ $('.s' + numStep).addClass('step-ok').removeClass('step'); $('.s' + numStep).empty().append('<i class=\"fa fa-check\" aria-hidden=\"true\"><\/i>'); }); $('.prev').click(function() { var numStep = $(this).attr( "num-step" ); var clStep = '#collapse' + (parseInt(numStep) - 1); $(clStep).collapse('show'); $('#accordion .in').collapse('hide'); }); $('.btn-primary').click(function() { var delay = 4000; setTimeout(function(){ window.location = 'p3'; }, delay); }); $('.btn-secondary').click(function() { $('.step-ok').addClass('step').removeClass('step-ok'); $('.s0').empty().append('1'); $('.s1').empty().append('2'); $('#collapse0').collapse('show'); $('#accordion .in').collapse('hide'); }); });