Bootstrap Skip to Next Visible Tab

I have created a "Next" button in Bootstrap tab panel, which skips to the next tab in the sequence, however I want it to skip to the next visible tab i.e. where the li tag does not have the class "hide".

The original code I took from https://stackoverflow.com/questions/22297964/bootstrap-tabs-next-previous-buttons-for-forms and adapted as follows:

<ul class="nav nav-tabs">
  <li class="active"><a href="#tab1" data-toggle="tab">Products</a>
  </li>
  <li><a href="#tab2" data-toggle="tab">Sizes</a>
  </li>
  <li><a href="#tab3" data-toggle="tab">Quantities</a>
  </li>
  <li class="hide"><a href="#tab4" data-toggle="tab">Shipping</a>
  </li>
  <li><a href="#tab5" data-toggle="tab">Summary</a>
  </li>
</ul>
<div class="tab-content">
  <div class="tab-pane active" id="tab1">
    <a class="btn btn-primary btnNext">Next</a>
  </div>
  <div class="tab-pane" id="tab2">
    <a class="btn btn-primary btnNext">Next</a>
  </div>
  <div class="tab-pane" id="tab3">
    <a class="btn btn-primary btnNext">Next</a>
  </div>
  <div class="tab-pane" id="tab4">
    <a class="btn btn-primary btnNext">Next</a>
  </div>
  <div class="tab-pane" id="tab5">
    <a class="btn btn-danger btnClose">Close</a>
  </div>
</div>


<script type="text/javascript">
$(document).ready(function() {
    $('.btnNext').click(function() {
      $('.nav-tabs > .active').next('li').not(".hide").find('a').trigger('click');
    });
});
</script>

Fiddle: http://jsfiddle.net/tyLje3jz/

As you will see I included "not(".hide")".

This is not working quite as expected, as it will go as far as #tab3 but the button on #tab3 does nothing when what I want it to do is skip to #tab5 as #tab4 has the "hide" class.

From my understanding, ".next('li').not('.hide')" should seek out the next "li" tag without the hide class, which in this case is #tab5.

What am I doing wrong?

First, you'll need to use the class .btnNext not the id #btnNext in your click handler.

Based on the question trying to get next item not having a specific class, you can do it like this:

<!-- language: lang-js -->

$('.nav-tabs > .active').nextAll('li').not(".hide").first().find('a').trigger('click');

The problem is that .next() will grab a single element and .not() will remove any item in the collection that matches the criteria. So right before the hidden tab, your code would only grab the hidden tab and then immediately rule it out. Instead, what you need to do is find all matching items, rule out any hidden ones, and then pick the first.

Demo in Stack Snippets

<!-- begin snippet: js hide: false --> <!-- language: lang-js -->

$(function() {
  $('.btnNext').click(function() {
    $('.nav-tabs > .active').nextAll('li').not(".hide").first().find('a').trigger('click');
  });
});

<!-- language: lang-html -->

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<ul class="nav nav-tabs">
  <li class="active"><a href="#tab1" data-toggle="tab">Products</a></li>
  <li><a href="#tab2" data-toggle="tab">Sizes</a></li>
  <li><a href="#tab3" data-toggle="tab">Quantities</a></li>
  <li class="hide"><a href="#tab4" data-toggle="tab">Shipping</a></li>
  <li><a href="#tab5" data-toggle="tab">Summary</a></li>
</ul>
<div class="tab-content">
  <div class="tab-pane active" id="tab1">
    <a class="btn btn-primary btnNext">Next</a>
  </div>
  <div class="tab-pane" id="tab2">
    <a class="btn btn-primary btnNext">Next</a>
  </div>
  <div class="tab-pane" id="tab3">
    <a class="btn btn-primary btnNext">Next</a>
  </div>
  <div class="tab-pane" id="tab4">
    <a class="btn btn-primary btnNext">Next</a>
  </div>
  <div class="tab-pane" id="tab5">
    <a class="btn btn-danger btnClose">Close</a>
  </div>
</div>

<!-- end snippet -->