Bootstrap Snippet step wizard using HTML CSS Javascript

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="//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="stepwizard">
    <div class="stepwizard-row">
        <div class="stepwizard-step">
            <a class="btn btn-default btn-circle active-step" href="#step-1" data-toggle="tab" onclick="stepnext(1)" >1</a>
            <p>Select Rate Plan</p>
        </div>
        <div class="stepwizard-step">
            <a class="btn btn-default btn-circle" disabled="disabled" href="#step-2" data-toggle="tab">2</a>
            <p>Enter Date Range</p>
        </div>
        <div class="stepwizard-step">
            <a class="btn btn-default btn-circle" disabled="disabled" href="#step-3" data-toggle="tab">3</a>
            <p>Update Rates</p>
        </div> 
    </div>
        <div class="rate-updates">
                
                <div class="tab-content margintop0" style="border:none !important;">
                                
                                <div class="tab-pane fade active in padding20" id="step-1" >
                                        <div class="row"> step -1 </div>
                                
                                <button class="btn btn-xs btn-success" onclick="stepnext(2);" type="button"><i class="icon-next"></i> Next</button>
                                </div>
                                
                                <div class="tab-pane fade padding20 " id="step-2">
                                        <div class="row"> step -2 </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
.stepwizard-step p {
    margin-top: 10px;    
}
.stepwizard-row {
    display: table-row;
}
.stepwizard {
    display: table;     
    width: 100%;
    position: relative;
}
.stepwizard-step button[disabled] {
    opacity: 1 !important;
    filter: alpha(opacity=100) !important;
}
.stepwizard-row:before {
    top: 14px;
    bottom: 0;
    position: absolute;
    content: " ";
    width: 100%;
    height: 1px;
    background-color: #ccc;
    z-order: 0;
    
}
.stepwizard-step {    
    display: table-cell;
    text-align: center;
    position: relative;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function stepnext(n){
    if(n != 0){
        //$(".stepwizard-row a").switchClass('btn-primary','btn-default');
        $(".stepwizard-row a").removeClass('btn-primary');
        $(".stepwizard-row a").addClass('btn-default');
        $('.stepwizard a[href="#step-'+n+'"]').tab('show');
        //$('.stepwizard-row a[href="#step-'+n+'"]').switchClass('btn-default','btn-primary');
        $('.stepwizard-row a[href="#step-'+n+'"]').removeClass('btn-default');
        $('.stepwizard-row a[href="#step-'+n+'"]').addClass('btn-primary');
    }
}
stepnext(1);
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"step wizard"
Bootstrap 3.3.0 Snippet by peterxp

Related: See More

Questions / Comments:

"step wizard" Bootstrap 3.3.0 Snippet by peterxp

Related: See More

Questions / Comments:

"step wizard"
Bootstrap 3.3.0 Snippet by peterxp