Bootstrap Snippet Bootstrap Accordion Wizard using HTML CSS Bootstrap jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.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;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
$(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');
        });
        
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Bootstrap Accordion Wizard"
Bootstrap 3.0.0 Snippet by novadevco

Related: See More

Questions / Comments:

"Bootstrap Accordion Wizard" Bootstrap 3.0.0 Snippet by novadevco

Related: See More

Questions / Comments:

"Bootstrap Accordion Wizard"
Bootstrap 3.0.0 Snippet by novadevco