alka alka - 2 months ago 22
Javascript Question

Next and previous button functionality is not working

I have created tab content with next and previous button functionality. But next and previous button functionality is not working. I have used jquery.min.js version 1.11.1 version. I have created snippet as below. I have referred this question and created functionality as mentioned in answer. but still its not working.



$("ul.kyc-tab-list li a").click(function () {
$("ul.kyc-tab-list li a").removeClass("active");
$(this).addClass("active");
});

$(".tab-btn1").click(function () {
$("#tab1").show();
$("#tab2").hide();
$("#tab3").hide();
$("#tab4").hide();
$("#tab5").hide();
});

$(".tab-btn2").click(function () {
$("#tab1").hide();
$("#tab2").show();
$("#tab3").hide();
$("#tab4").hide();
$("#tab5").hide();
});

$(".tab-btn3").click(function () {
$("#tab1").hide();
$("#tab2").hide();
$("#tab3").show();
$("#tab4").hide();
$("#tab5").hide();
});

$(".tab-btn4").click(function () {
$("#tab1").hide();
$("#tab2").hide();
$("#tab3").hide();
$("#tab4").show();
$("#tab5").hide();
});

$(".tab-btn5").click(function () {
$("#tab1").hide();
$("#tab2").hide();
$("#tab3").hide();
$("#tab4").hide();
$("#tab5").show();
});


$('#btnNext').click(function () {


// get current tab

var currentTab = $(".tab.active");

// get the next tab, if there is one
var newTab = currentTab.next();

// at the end, so go to the first one
if (newTab.length === 0) {
newTab = $(".tab").first();
}

currentTab.removeClass('active');
// add active to new tab
newTab.addClass('active');
});

$('#btnPrevious').click(function () {
// get current tab
var currentTab = $(".tab.active");

// get the previous tab, if there is one
var newTab = currentTab.prev();

// at the start, so go to the last one
if (newTab.length === 0) {
newTab = $(".tab").last();
}

currentTab.removeClass('active');
// add active to new tab
newTab.addClass('active');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>

<section>

<div class="kyc-tab-wrapper">
<ul class="kyc-tab-list">
<li>
<a href="javascript:void(0);" class="tab active tab-btn1"><span>01</span>Customer</a>
</li>
<li>
<a href="javascript:void(0);" class="tab tab-btn2"><span>02</span>Contact / Promotors</a>
</li>
<li>
<a href="javascript:void(0);" class="tab tab-btn3"><span>03</span>Bank / Business</a>
</li>
<li>
<a href="javascript:void(0);" class="tab tab-btn4"><span>04</span>Other</a>
</li>
<li>
<a href="javascript:void(0);" class="tab tab-btn5"><span>05</span>Finish</a>
</li>
</ul>

<div class="kyc-tab-content" id="tab1">

tab 1
</div>
<div class="kyc-tab-content" id="tab2">
tab 2
</div>
</div>

<div class="kyc-tab-content" id="tab3">
tab 3

</div>
<div class="kyc-tab-content" id="tab4">
tab 4
</div>
<div class="kyc-tab-content" id="tab5">

tab 5</div>

<div class="kyc-tab-form-btn-wrap">
<button id="btnPrevious" style="display:none"> Previous</button>
<button id="btnNext">Next </button>
</div>
</div>
</div>
</section>


</div>




Answer Source

So these are the change I've made to your code:

  1. First of all, the closing tag of kyc-tab-wrapper was closed after tab2 - fixed that.

  2. Instead of having multiple listeners to switch the tabs, you can include this in the first listener itself:

    $(".kyc-tab-content").hide();
    $($(this).attr('class').split(' ').find(function(e) {
        return e.startsWith('tab-btn');
    }).replace('tab-btn', '#tab')).show();
    
  3. The next and previous buttons are not working as you are doing prev and next on a - you should be doing it with li as lis are the siblings:

    currentTab.closest('li').prev().find('a');
    currentTab.closest('li').next().find('a');
    
  4. You can just trigger click on the tab instead of doing the login again.

  5. Also adding an initial trigger to show the first tab when page loads using $(".tab.active").trigger('click')

See demo below:

$("ul.kyc-tab-list li a").click(function() {
  $("ul.kyc-tab-list li a").removeClass("active");
  $(this).addClass("active");
  /* Do this instead of multiple listeners */
  $(".kyc-tab-content").hide();
  $($(this).attr('class').split(' ').find(function(e) {
    return e.startsWith('tab-btn');
  }).replace('tab-btn', '#tab')).show();
});

// active tab load initially
$(".tab.active").trigger('click');


$('#btnNext').click(function() {
  var currentTab = $(".tab.active");
  var newTab = currentTab.closest('li').next().find('a');
  if (newTab.length === 0) {
    newTab = $(".tab").first();
  }
  newTab.trigger('click');
});

$('#btnPrevious').click(function() {
  var currentTab = $(".tab.active");
  var newTab = currentTab.closest('li').prev().find('a');
  if (newTab.length === 0) {
    newTab = $(".tab").last();
  }
  newTab.trigger('click');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
  <section>
    <div class="kyc-tab-wrapper">
      <ul class="kyc-tab-list">
        <li>
          <a href="javascript:void(0);" class="tab active tab-btn1"><span>01</span>Customer</a>
        </li>
        <li>
          <a href="javascript:void(0);" class="tab tab-btn2"><span>02</span>Contact / Promotors</a>
        </li>
        <li>
          <a href="javascript:void(0);" class="tab tab-btn3"><span>03</span>Bank / Business</a>
        </li>
        <li>
          <a href="javascript:void(0);" class="tab tab-btn4"><span>04</span>Other</a>
        </li>
        <li>
          <a href="javascript:void(0);" class="tab tab-btn5"><span>05</span>Finish</a>
        </li>
      </ul>
      <div class="kyc-tab-content" id="tab1">tab 1</div>
      <div class="kyc-tab-content" id="tab2">tab 2</div>
      <div class="kyc-tab-content" id="tab3">tab 3</div>
      <div class="kyc-tab-content" id="tab4">tab 4</div>
      <div class="kyc-tab-content" id="tab5">tab 5</div>
      <div class="kyc-tab-form-btn-wrap">
        <button id="btnPrevious">  Previous</button>
        <button id="btnNext">Next </button>
      </div>
    </div>
  </section>
</div>