title: Switch active bootstrap tab when button is clicked
body: <p>I need to be able to click the <code>Render cropped image</code> button, and have the active tab switch to the Render view.</p>
  
  <pre><code>&lt;div class="container"&gt;
  &lt;div class="bs-docs-example"&gt;
      &lt;ul id="myTab" class="nav nav-tabs"&gt;
          &lt;li class="active"&gt;&lt;a href="#home" data-toggle="tab"&gt;Crop&lt;/a&gt;
  
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#profile" data-toggle="tab"&gt;Render View&lt;/a&gt;
  
          &lt;/li&gt;
      &lt;/ul&gt;
      &lt;div id="Content" class="tab-content"&gt;
          &lt;div class="tab-pane fade in active" id="home"&gt;
              &lt;div class="col-md-6"&gt;
                  &lt;div class="panel crop"&gt;
                      &lt;div class="well"&gt;
                          &lt;div class="file-warning"&gt;&lt;/div&gt;
                          &lt;div class="form-group"&gt;
                              &lt;label for="imageid"&gt;Select an image&lt;/label&gt;
                              &lt;input type="file" name="file" class="btn btn-default form-control" id="file" accept="image/jpg, image/png, image/jpeg" /&gt;
                          &lt;/div&gt;
                          &lt;div class="form-group"&gt;
                              &lt;label for="imageid"&gt;Enter asset ID&lt;/label&gt;
                              &lt;input type="text" onkeypress="return charsOnly(this, event)" maxlength="64" class="form-control" id="imageid" name="imageid" placeholder="Enter image ID"&gt;
                          &lt;/div&gt;
                          &lt;button class="btn btn-default" id="reset"&gt;Reset&lt;/button&gt;
                          &lt;!--&lt;input id="renderButton" type="button" value="Render final image" class="btn btn-primary" /&gt;--&gt;&lt;/div&gt;
                      &lt;div class="panel-body cropper"&gt;
                          &lt;div id="container" class="well"&gt;&lt;/div&gt;
                          &lt;input id="renderButton" type="button" value="Render cropped image" class="btn btn-primary" /&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="tab-pane fade" id="profile"&gt;
              &lt;div class="col-md-6 render"&gt;
                  &lt;div class="panel"&gt;
                      &lt;div class="panel-body"&gt;
                          &lt;div class="response"&gt;&lt;/div&gt;
                          &lt;div id="result_container" class="result"&gt;&lt;/div&gt;
                      &lt;/div&gt;
                      &lt;!--&lt;div class="share-link"&gt;&lt;/div&gt;--&gt;
                      &lt;div class="well submit-well"&gt;
                          &lt;div class="share-link"&gt;&lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  
  var $tabs = $('#Content');
  
  $('#renderButton').on('click', function () {
      $tabs.filter('.active').next('li').find('a[data-toggle="tab-    pane"]').tab('show');
  });
  </code></pre>
  
  <p>JSFIDDLE: <a href="http://jsfiddle.net/mattography/erv8fedh/228/" rel="nofollow">Link</a></p>