title: Reset bootstrap tab structure after Ajax Get
body: <p>I have a bunch of big pages(around 12 of them which I omitted) that I am loading with ajax.
  I am loading the pages in to Tabs.</p>
  
  <pre><code>            &lt;div class="tab-content"&gt;
                  &lt;div id="Summary_Tab" class="tab-pane active"&gt;&lt;/div&gt;
                  &lt;div id="Health_A" class="tabe-pane fade "&gt;&lt;/div&gt;
                  &lt;div id="Risk_A" class="tabe-pane fade"&gt;&lt;/div&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p>This is how I load</p>
  
  <pre><code>$(document).ready(function () { 
  $.get('Health_A', function (data) {
      $("#Health_A").html(data);
  });
  $.get('Risk_A', function (data) {
      $("#Risk_A").html(data);
  });
  });
  </code></pre>
  
  <p>Now what happens is that I get blank blocks that represent what I got from ajax in a row that make the page really long. The new tab isnt really invisible, its not seen but is clickable. If I click on a tab toggle the tab is shown but in the middle of the page not at the start of it.
  What I need to do as far as I can think is reset the bootstrap so it will make all the tabs invisible properly and all the lengths of them small.</p>
  
  <p>Or any other ideas? What to do?</p>