CODEWITHSUNDEEP
jqueryhtmltwitter-bootstraptwitter-bootstrap-3tabs
vedankita kumbhar
vedankita kumbhar

Reputation: 1490

Next Previous Bootstrap tabs

I have two common "NEXT" and "PREVIOUS" buttons on click on respective button bootstrap tabs should move. I have Create following code for that. My Code

My problem is I want to show previous button on "NEXT" button click but want to hide on first tab active and vise versa. Please help.

jQuery('#ntxbtn').click(function(e){
    e.preventDefault();
    var next_tab = jQuery('.nav-tabs > .active').next('li').find('a');
    jQuery('#prevbtn').show();
    if(next_tab.length>0){
      next_tab.trigger('click');
    }else if(next_tab.length>0){
      jQuery('#ntxbtn').hide();
    }
  });
  jQuery('#prevbtn').click(function(e){
    e.preventDefault();
    var next_tab = jQuery('.nav-tabs > .active').prev('li').find('a');
    if(next_tab.length>0){
      next_tab.trigger('click');
    }else {
      jQuery('#prevbtn').hide();
    }
  });

Upvotes: 1

Views: 2061

Answers (2)

Ajay Makwana
Ajay Makwana

Reputation: 2372

This might be work:

jQuery('#ntxbtn').click(function (e) {
    e.preventDefault();
    var next_tab = jQuery('.nav-tabs > .active').next('li').find('a');
    jQuery('#prevbtn').show();
    if (next_tab.length > 0) {
        next_tab.trigger('click');
    }
    checkNavButtons();
});
jQuery('#prevbtn').click(function (e) {
    e.preventDefault();
    var next_tab = jQuery('.nav-tabs > .active').prev('li').find('a');
    if (next_tab.length > 0) {
        next_tab.trigger('click');
    }
    checkNavButtons();
});


function checkNavButtons() {
    var activeButton = jQuery('.nav-tabs > .active');
    var nextNav = activeButton.next('li').find('a');
    var prevNav = activeButton.prev('li').find('a');

    if (nextNav.length) {
        jQuery('#ntxbtn').show();
    } else {
        jQuery('#ntxbtn').hide();
    }

    if (prevNav.length) {
        jQuery('#prevbtn').show();
    } else {
        jQuery('#prevbtn').hide();
    }
}

See the fiddle: https://jsfiddle.net/rp2w4Ljq/3/

Upvotes: 1

Rhythm Ruparelia
Rhythm Ruparelia

Reputation: 667

I have updated your code to function properly. Only JS code updated.

Please check the demo link.

var totalTabs = $('.nav-tabs li').length;
var currentTab = 1;

$('#ntxbtn').click(function(e){
    e.preventDefault();
    currentTab +=1;
    showHideControls();
    var next_tab = $('.nav-tabs > .active').next('li').find('a');
    if(next_tab.length > 0){
      next_tab.trigger('click');
    }
  });
  $('#prevbtn').click(function(e){
    e.preventDefault();
    currentTab -=1;
    showHideControls();
    var prev_tab = $('.nav-tabs > .active').prev('li').find('a');
    if(prev_tab.length > 0){
      prev_tab.trigger('click');
    }
});

function showHideControls(){

  if(currentTab == 1){
    $('#prevbtn').hide();
  } else if(currentTab == totalTabs){
		$('#ntxbtn').hide();
  } else {
    $('#prevbtn').show();
    $('#ntxbtn').show();
  }

}
.nav-tabs li a{
  display:inline-block;
  padding:5px;
  border:1px solid #eee;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="nav nav-tabs">
  <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
  <li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
  <li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
</ul>

<div class="tab-content">
  <div id="home" class="tab-pane  in active">
    <h3>HOME</h3>
    <p>Some content.</p>
  </div>
  <div id="menu1" class="tab-pane fade">
    <h3>Menu 1</h3>
    <p>Some content in menu 1.</p>
  </div>
  <div id="menu2" class="tab-pane fade">
    <h3>Menu 2</h3>
    <p>Some content in menu 2.</p>
  </div>
</div>

<a href="#" type="button" class="btn btn-primary" id="prevbtn" style="display:none;"></i> Previous</a>
                                <a href="#" type="button" class="btn btn-primary" id="ntxbtn"> Next</a>

Upvotes: 2

Related Questions