title: Bootstrap Tabs - Next and previous
body: <p>I have an issue with my Bootstrap Tabs.</p>
  
  <p>I defined a <code>scrollTop</code> function on next button. The scrolling is working fine but the tab is jumping from 1 to 3. </p>
  
  <p><strong>My JS code:</strong></p>
  
  <pre><code>&lt;script&gt;
  
  $('.btnNext').click(function(){
  
       $('html, body').animate({
          scrollTop: jQuery(".expect").offset().top
      }, 800,
  
      function () {
            $('.nav-tabs &gt; .active').next('li').find('a').trigger('click');
      }
  );
  
  });
  
    $('.btnPrevious').click(function(){
    $('.nav-tabs &gt; .active').prev('li').find('a').trigger('click');
  });
  
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>HTML Code</strong> :</p>
  
  <pre><code>&lt;div class="step-tabs"&gt;
      &lt;ul class="nav nav-tabs" role="tablist"&gt;
          &lt;li class="nav-item active" style="padding:3px;"&gt;
              &lt;a class="nav-link" data-toggle="tab" href="#tab1" role="tab"&gt;STAP 01&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="nav-item" style="padding:3px;"&gt;
              &lt;a class="nav-link" data-toggle="tab" href="#tab2" role="tab"&gt;STAP 02&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="nav-item" style="padding:3px;"&gt;
              &lt;a class="nav-link" data-toggle="tab" href="#tab3" role="tab"&gt;STAP 03&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="nav-item" style="padding:3px;"&gt;
              &lt;a class="nav-link" data-toggle="tab" href="#tab5" role="tab"&gt;STAP 03&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="nav-item" style="padding:3px;"&gt;
              &lt;a class="nav-link" data-toggle="tab" href="#tab5" role="tab"&gt;STAP 03&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="nav-item" style="padding:3px;"&gt;
              &lt;a class="nav-link" data-toggle="tab" href="#tab6" role="tab"&gt;STAP 03&lt;/a&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  &lt;div class="step-panes"&gt;
      &lt;!-- Tab panes --&gt;
      &lt;div class="tab-content"&gt;
          &lt;div class="tab-pane active" id="tab1" role="tabpanel"&gt;
              &lt;p&gt;CONTENT TABS 01&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;XXXXXX&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;XXXXXXX&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;/p&gt;&lt;a class="btn btn-primary btnNext"&gt;Next&lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="tab-pane" id="tab2" role="tabpanel"&gt;
              &lt;p&gt;CONTENT TABS 01&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;XXXXXX&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;/p&gt;&lt;a class="btn btn-primary btnNext"&gt;Next&lt;/a&gt; &lt;a class="btn btn-primary btnPrevious"&gt;Previous&lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="tab-pane" id="tab3" role="tabpanel"&gt;
              &lt;p&gt;CONTENT TABS 03&lt;/p&gt;&lt;a class="btn btn-primary btnNext"&gt;Next&lt;/a&gt; &lt;a class="btn btn-primary btnPrevious"&gt;Previous&lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="tab-pane" id="tab4" role="tabpanel"&gt;
              &lt;p&gt;CONTENT TABS 03&lt;/p&gt;&lt;a class="btn btn-primary btnNext"&gt;Next&lt;/a&gt; &lt;a class="btn btn-primary btnPrevious"&gt;Previous&lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="tab-pane" id="tab5" role="tabpanel"&gt;
              &lt;p&gt;CONTENT TABS 03&lt;/p&gt;&lt;a class="btn btn-primary btnNext"&gt;Next&lt;/a&gt; &lt;a class="btn btn-primary btnPrevious"&gt;Previous&lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="tab-pane" id="tab6" role="tabpanel"&gt;
              &lt;p&gt;CONTENT TABS 03&lt;/p&gt;&lt;a class="btn btn-primary btnNext"&gt;Next&lt;/a&gt; &lt;a class="btn btn-primary btnPrevious"&gt;Previous&lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>