Bootstrap Snippet bootstrap multi step form 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 ---------->
<div class="container">
        <div class="row form-group">
            <div class="col-xs-12">
                <ul class="nav nav-pills nav-justified thumbnail setup-panel" id="myNav">
                    <li id="navStep1" class="li-nav active" step="#step-1">
                        <a>
                            <h4 class="list-group-item-heading">Step 1</h4>
                            <p class="list-group-item-text">First step description</p>
                        </a>
                    </li>
                    <li id="navStep2" class="li-nav disabled" step="#step-2">
                        <a>
                            <h4 class="list-group-item-heading">Step 2</h4>
                            <p class="list-group-item-text">Second step description</p>
                        </a>
                    </li>
                    <li id="navStep3" class="li-nav disabled" step="#step-3">
                        <a>
                            <h4 class="list-group-item-heading">Step 3</h4>
                            <p class="list-group-item-text">Third step description</p>
                        </a>
                    </li>
                    <li id="navStep4" class="li-nav disabled" step="#step-4">
                        <a>
                            <h4 class="list-group-item-heading">Step 4</h4>
                            <p class="list-group-item-text">Second step description</p>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
  /*
  you can also use the href in the a element, and this code is no nesseray
  */
  #myNav li:not([disabled]){
            cursor:pointer;
        }
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
 var currentStep = 1;
$(document).ready(function () {
    $('.li-nav').click(function () {
        var $targetStep = $($(this).attr('step'));
        currentStep = parseInt($(this).attr('id').substr(7));
        if (!$(this).hasClass('disabled')) {
            $('.li-nav.active').removeClass('active');
            $(this).addClass('active');
            $('.setup-content').hide();
            $targetStep.show();
        }
    });
    $('#navStep1').click();
});
        
function step1Next() {
    //You can make only one function for next, and inside you can check the current step
    if (true) {//Insert here your validation of the first step
        currentStep += 1;
        $('#navStep' + currentStep).removeClass('disabled');
        $('#navStep' + currentStep).click();
    }
}
function prevStep() {
    //Notice that the btn prev not exist in the first step
    currentStep -= 1;
    $('#navStep' + currentStep).click();
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"bootstrap multi step form"
Bootstrap 3.0.0 Snippet by Yaacov

Related: See More

Questions / Comments:

"bootstrap multi step form" Bootstrap 3.0.0 Snippet by Yaacov

Related: See More

Questions / Comments:

"bootstrap multi step form"
Bootstrap 3.0.0 Snippet by Yaacov