Bootstrap Snippet Step Wizard (Updated) 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
<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">
        <div class="col-xs-12">
            <ul class="nav nav-pills nav-justified thumbnail">
                <li data-target-id='1'><a href="#">
                    <h4 class="list-group-item-heading">Step 1</h4>
                    <p class="list-group-item-text">First step description</p>
                </a></li>
                <li data-target-id='2' class="active"><a href="#">
                    <h4 class="list-group-item-heading">Step 2</h4>
                    <p class="list-group-item-text">Second step description</p>
                </a></li>
                <li data-target-id='3' class="disabled"><a href="#">
                    <h4 class="list-group-item-heading">Step 3</h4>
                    <p class="list-group-item-text">Third step description</p>
                </a></li>
            </ul>
            <div class="wells">
                
                <div class="well well-sm" style="display:none;" data-id='1'>Content 1.</div>
                <div class="well well-sm" data-id='2'>Content 2..</div>
                <div class="well well-sm" style="display:none;" data-id='3'>Content 3...</div>
                
            </div>
        </div>
    </div>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
body{ margin-top:20px; }
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
$(document).ready(function() {
    var li = $(".nav-pills>li:not(.disabled)");
    $(li).click(function() {
        $(li).each(function() {
            $(this)[0].className = ""; // Deactivate all <li> 
            $(".well").hide();
        });
        $(this)[0].className = "active";
        $(".well[data-id=" + $(this).data("target-id") + "]").show('slow');
    });
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Step Wizard (Updated)"
Bootstrap 3.0.0 Snippet by Mika

Related: See More

Questions / Comments:

"Step Wizard (Updated)" Bootstrap 3.0.0 Snippet by Mika

Related: See More

Questions / Comments:

"Step Wizard (Updated)"
Bootstrap 3.0.0 Snippet by Mika