title: Remove tab content on page load , then add back when tab clicked
body: <p>I am using a site that allows its users an admin panel for which we can add HTML/CSS/Javascript/Jquery to the site after their DOM is loaded. Since i am a user i can not change what is being loaded from their server. They provide some tabs that you can put content into , the issue I have is all the content is loaded with the DOM and since i have a ton of content it makes the site a little slow to load. </p>
  
  <p>I was wanting to empty/detach/remove all tab content except the first tab , being #tab0 and #tabcontent0 , then as i click the other tabs , have the content reinserted.</p>
  
  <p>Here is the existing HTML and the Script they load. I can reload their script with changes or use javascript or jquery to make changes to it.</p>
  
  <pre><code>function show_tab (tab_id) {
     var done = false;
     var counter = 0;
     while (! done) {
        var this_tab_content = document.getElementById("tabcontent" + counter);
        var this_tab = document.getElementById("tab" + counter);
        if (! this_tab_content) {
           done = true;
        } else {
           if (counter == tab_id) {
              this_tab_content.style.display = '';
              this_tab.className = "currenttab";
           } else {
              this_tab_content.style.display = 'none';
              this_tab.className = "";
           }
        }
        counter++;
     }
     location.hash = tab_id;
  }
  
  &lt;div id="homepagetabsdiv"&gt;
   &lt;ul id="homepagetabs"&gt;
    &lt;li class="currenttab" id="tab0" onclick="javascript:show_tab('0');"&gt;Main&lt;/li&gt;    
    &lt;li class="" id="tab1" onclick="javascript:show_tab('1');"&gt;TAB 1&lt;/li&gt;    
    &lt;li class="" id="tab2" onclick="javascript:show_tab('2');"&gt;TAB 2&lt;/li&gt;    
    &lt;li class="" id="tab3" onclick="javascript:show_tab('3');"&gt;TAB 3&lt;/li&gt;    
    &lt;li class="" id="tab4" onclick="javascript:show_tab('4');"&gt;TAB 4&lt;/li&gt;    
   &lt;/ul&gt;
  &lt;/div&gt;
  
  &lt;div id="tabcontent0" class="homepagetabcontent"&gt;&lt;/div&gt;
  &lt;div id="tabcontent1" class="homepagetabcontent"&gt;&lt;/div&gt;
  &lt;div id="tabcontent2" class="homepagetabcontent"&gt;&lt;/div&gt;
  &lt;div id="tabcontent3" class="homepagetabcontent"&gt;&lt;/div&gt;
  &lt;div id="tabcontent4" class="homepagetabcontent"&gt;&lt;/div&gt;
  </code></pre>