Bootstrap Snippet Step wizard (using tabs) using HTML CSS 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 ---------->
<div class="container">
    <div class="row">
        <section>
        <div class="wizard">
            
                <ul class="nav nav-wizard">
                    <li class="active">
                        <a href="#step1" data-toggle="tab">Billing Details</a>
                    </li>
                    <li class="disabled">
                        <a href="#step2" data-toggle="tab">Delivery Method</a>
                    </li>
                    <li class="disabled">
                        <a href="#step3" data-toggle="tab">Payment Method</a>
                    </li>
                    
                     <li class="disabled">
                        <a href="#step4" data-toggle="tab">Confirm Order</a>
                    </li>
                </ul>
           
            <form>
                <div class="tab-content">
                    <div class="tab-pane active" id="step1">
                        <h3>Step 1</h3>
                        <p>This is step 1</p>
                        <ul class="list-inline pull-right">
                            <li><button type="button" class="btn btn-primary">Continue</button></li>
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
body{
    margin: 20px auto;
}
ul.nav-wizard {
  background-color: #f1f1f1;
  border: 1px solid #d4d4d4;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 3px;
  position: relative;
  overflow: hidden;
}
ul.nav-wizard:before {
  position: absolute;
}
ul.nav-wizard:after {
  display: block;
  position: absolute;
  left: 0px;
  right: 0px;
  top: 138px;
  height: 47px;
  border-top: 1px solid #d4d4d4;
  border-bottom: 1px solid #d4d4d4;
  z-index: 11;
  content: " ";
}
ul.nav-wizard li {
  position: relative;
  float: left;
  height: 46px;
  display: inline-block;
  text-align: center;
  padding: 0 20px 0 30px;
  margin: 0;
  font-size: 16px;
  line-height: 46px;
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
$(document).ready(function () {
  
    //Wizard
    $('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
        var $target = $(e.target);
    
        if ($target.parent().hasClass('disabled')) {
            return false;
        }
    });
    $(".btn-primary").click(function (e) {
        var $active = $('.wizard .nav-wizard li.active');
        $active.next().removeClass('disabled');
        nextTab($active);
    });
});
function nextTab(elem) {
    $(elem).next().find('a[data-toggle="tab"]').click();
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Step wizard (using tabs)"
Bootstrap 3.0.0 Snippet by Alexandros

Related: See More

Questions / Comments:

"Step wizard (using tabs)" Bootstrap 3.0.0 Snippet by Alexandros

Related: See More

Questions / Comments:

"Step wizard (using tabs)"
Bootstrap 3.0.0 Snippet by Alexandros