title: how to display next bootstrap tab on button click
body: <p>I want to display next bootstrap tabs one by one on button click.Right now on button click only the second tab is displayed as i have hard coded it what should be in place of the href="#second" how to get the particular id in the href?When I first click on other tabs instead of  clicking on the first tab which is active then the user must get the error message that ' the user have to click the first tab and then the other tabs' using noty plugin means disable the other tabs except for the first tab on page load .</p>
  
  <p>here is my code</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;title&gt;Bootstrap Case&lt;/title&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
    &lt;script&gt;
    $(function(){
  
          $('#changetabbutton').click(function(e){
              e.preventDefault();
  
              $('#mytabs a[href="#second"]').tab('show');
          });
  
      });
    &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div class="container"&gt;
  
      &lt;!-- Nav tabs --&gt;
      &lt;ul id="mytabs" class="nav nav-tabs" role="tablist"&gt;
        &lt;li class="active"&gt;
            &lt;a href="#first" role="tab" data-toggle="tab"&gt;
                &lt;i class="fa fa-home"&gt;&lt;/i&gt; First tab
            &lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;&lt;a href="#second" role="tab" data-toggle="tab"&gt;
            &lt;i class="fa fa-user"&gt;&lt;/i&gt; Second tab
            &lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;
            &lt;a href="#third" role="tab" data-toggle="tab"&gt;
                &lt;i class="fa fa-envelope"&gt;&lt;/i&gt; Third tab
            &lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;
            &lt;a href="#fourth" role="tab" data-toggle="tab"&gt;
                &lt;i class="fa fa-envelope"&gt;&lt;/i&gt; Fourth tab
            &lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;
            &lt;a href="#fourth" role="tab" data-toggle="tab"&gt;
                &lt;i class="fa fa-envelope"&gt;&lt;/i&gt; Fifth tab
            &lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
  
      &lt;!-- Tab panes --&gt;
      &lt;div class="tab-content"&gt;
        &lt;div class="tab-pane fade active in cont" id="first"&gt;
            &lt;h2&gt;First tab&lt;/h2&gt;
        &lt;/div&gt;
        &lt;div class="tab-pane fade cont" id="second"&gt;
            &lt;h2&gt;Second tab&lt;/h2&gt;
        &lt;/div&gt;
        &lt;div class="tab-pane fade cont" id="third"&gt;
            &lt;h2&gt;Third tab&lt;/h2&gt;
        &lt;/div&gt;
        &lt;div class="tab-pane fade cont" id="third"&gt;
            &lt;h2&gt;Fourth tab&lt;/h2&gt;
        &lt;/div&gt;
         &lt;div class="tab-pane fade cont" id="third"&gt;
            &lt;h2&gt;Fifth tab&lt;/h2&gt;
        &lt;/div&gt;
  
      &lt;/div&gt;
       &lt;button type="button" id="changetabbutton" class="btn btn-primary "&gt;Set next tab&lt;/button&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>