title: Open a specific bootstrap tab on page load using jQuery
body: <p>I try to open a <code>Bootstrap v.3</code> tab on page load using <code>jQuery</code>. I tried the </p>
  
  <pre><code>$('#activeTab3').addClass("active"); 
  </code></pre>
  
  <p>and</p>
  
  <pre><code>$('#activeTab3').tab('show')
  </code></pre>
  
  <p>which colors the button in the navigation list, but the content which is shown is belongs to the 1st tab.</p>
  
  <p>I also tried:</p>
  
  <pre><code>$("#mytabs").tabs({
    active: 1
  });
  </code></pre>
  
  <p>but I get an error that tabs isn't a function..</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('#activeTab3').addClass("active");
  
  //$('#activeTab3').tab('show')
  
  
  /*
  $("#mytabs").tabs({
    active: 1
  });
  */</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /&gt;
  
  &lt;div class="container"&gt;
    &lt;div class="row mtop-2"&gt;
      &lt;div class="col-md-12 col-xs-10"&gt;
        &lt;ul class="nav nav-pills" role="tablist" id="mytabs"&gt;
          &lt;li role="presentation" id="activeTab1"&gt;&lt;a href="#tab1" aria-controls="home" role="tab" data-toggle="tab"&gt;tab1&lt;/a&gt;&lt;/li&gt;
          &lt;li role="presentation" id="activeTab2"&gt;&lt;a href="#tab2" aria-controls="home" role="tab" data-toggle="tab"&gt;tab2&lt;/a&gt;&lt;/li&gt;
          &lt;li role="presentation" id="activeTab3"&gt;&lt;a href="#tab3" aria-controls="home" role="tab" data-toggle="tab"&gt;tab3&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
  
        &lt;div class="tab-content"&gt;
  
          &lt;div role="tabpanel" class="tab-pane active" id="tab1"&gt;
            &lt;div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"&gt;
              &lt;div class="panel panel-default"&gt;
                &lt;div class="panel-heading" role="tab" id="headingOne"&gt;
                  &lt;h4 class="panel-title"&gt;
                    &lt;a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseMachine1" aria-expanded="true" aria-controls="collapseMachine1"&gt;
                      &lt;i class="fa fa-plus mright-1"&gt;&lt;/i&gt; panel 1-1
                    &lt;/a&gt;
                  &lt;/h4&gt;
                &lt;/div&gt;
                &lt;div id="collapseMachine1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="collapseMachine1"&gt;
                  &lt;div class="panel-body"&gt;
                    &lt;div class="row mtop-2"&gt;
                      .... panel 1-1
                    &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="panel panel-default"&gt;
                &lt;div class="panel-heading" role="tab" id="headingTwo"&gt;
                  &lt;h4 class="panel-title"&gt;
                    &lt;a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseMachine2" aria-expanded="false" aria-controls="collapseMachine2"&gt;
                      &lt;i class="fa fa-edit mright-1"&gt;&lt;/i&gt; panel 1-2
                    &lt;/a&gt;
                  &lt;/h4&gt;
                &lt;/div&gt;
                &lt;div id="collapseMachine2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="collapseMachine2"&gt;
                  &lt;div class="panel-body"&gt;
                    .... panel 1-3
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div role="tabpanel" class="tab-pane" id="tab2"&gt;
            &lt;div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"&gt;
              &lt;div class="panel panel-default"&gt;
                &lt;div class="panel-heading" role="tab" id="headingOne"&gt;
                  &lt;h4 class="panel-title"&gt;
                    &lt;a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseRobot1" aria-expanded="true" aria-controls="collapseRobot1"&gt;
                      &lt;i class="fa fa-plus mright-1"&gt;&lt;/i&gt; panel 2-1
                    &lt;/a&gt;
                  &lt;/h4&gt;
                &lt;/div&gt;
                &lt;div id="collapseRobot1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="collapseRobot1"&gt;
                  &lt;div class="panel-body"&gt;
                    panel 2-1
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="panel panel-default"&gt;
                &lt;div class="panel-heading" role="tab" id="headingTwo"&gt;
                  &lt;h4 class="panel-title"&gt;
                    &lt;a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseRobot2" aria-expanded="false" aria-controls="collapseRobot2"&gt;
                      &lt;i class="fa fa-edit mright-1"&gt;&lt;/i&gt; panel 2-2
                    &lt;/a&gt;
                  &lt;/h4&gt;
                &lt;/div&gt;
                &lt;div id="collapseRobot2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="collapseRobot2"&gt;
                  &lt;div class="panel-body"&gt;
                    panel 2-2
  
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div role="tabpanel" class="tab-pane" id="tab3"&gt;
            &lt;div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"&gt;
              &lt;div class="panel panel-default"&gt;
                &lt;div class="panel-heading" role="tab" id="headingOne"&gt;
                  &lt;h4 class="panel-title"&gt;
                    &lt;a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseMould1" aria-expanded="true" aria-controls="collapseMould1"&gt;
                      &lt;i class="fa fa-plus mright-1"&gt;&lt;/i&gt; panel 3-1
                    &lt;/a&gt;
                  &lt;/h4&gt;
                &lt;/div&gt;
                &lt;div id="collapseMould1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="collapseMould1"&gt;
                  &lt;div class="panel-body"&gt;
                    panel 3-1
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="panel panel-default"&gt;
                &lt;div class="panel-heading" role="tab" id="headingTwo"&gt;
                  &lt;h4 class="panel-title"&gt;
                    &lt;a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseMould2" aria-expanded="false" aria-controls="collapseMould2"&gt;
                      &lt;i class="fa fa-edit mright-1"&gt;&lt;/i&gt; panel 3-2
                    &lt;/a&gt;
                  &lt;/h4&gt;
                &lt;/div&gt;
                &lt;div id="collapseMould2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="collapseMould2"&gt;
                  &lt;div class="panel-body"&gt;
                    panel 3-2
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>