CODEWITHSUNDEEP
jquerytwitter-bootstraptwitter-bootstrap-3
Miomir Dancevic
Miomir Dancevic

Reputation: 6852

Creating next and back button on tabs bootstrap 3 wizard?

I am trying to create a simple next and back button to show tabs in bootstrap 3 via data attr

Here is working fiddle http://jsfiddle.net/52VtD/9162/

Here is HTML

<div class="tab-content">
    <div class="tab-pane active" id="1" data-step="1">1</div>
    <div class="tab-pane" id="2" data-step="2">2</div>
    <div class="tab-pane" id="3" data-step="3">3</div>
    <div class="tab-pane" id="4" data-step="3">4</div>

</div>

<a href="#1" data-toggle="tab" class="step-back">back</a>
<a href="#2" data-toggle="tab" class="step-next">next </a>

But on last tab i have to show Finish istead of next, this is some kind of wizard, i have tried the bootstrap wizard but i does not work in 3.3 :(

Upvotes: 0

Views: 6629

Answers (1)

dm4web
dm4web

Reputation: 4652

http://jsfiddle.net/52VtD/9197/

HTML:

<div class="tab-content">
    <div class="tab-pane active" id="1" data-step="1">1</div>
    <div class="tab-pane" id="2" data-step="2">2</div>
    <div class="tab-pane" id="3" data-step="3">3</div>
    <div class="tab-pane" id="4" data-step="4">4</div>

</div>

<a href="#1" data-toggle="tab" class="step-back">back</a>
<a href="#2" data-toggle="tab" class="step-next">next </a>

JQ:

$('.step-back, .step-next').on('shown.bs.tab', function (e) {
  currentStep()
})


function currentStep() {    
  var currentVal = $('.tab-pane.active').attr("data-step");
  currentVal = parseInt(currentVal)    

  var prev = currentVal - 1;
  var next = currentVal + 1;

  $('.step-back').attr('href','#' + prev);
  $('.step-next').attr('href','#' + next);
}
  1. event shown.bs.tab - This event fires on tab show after a tab has been shown LINK
  2. attr() is function to set new href value LINK

Upvotes: 1

Related Questions