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.

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.

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.

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;
}

<div id="homepagetabsdiv">
 <ul id="homepagetabs">
  <li class="currenttab" id="tab0" onclick="javascript:show_tab('0');">Main</li>    
  <li class="" id="tab1" onclick="javascript:show_tab('1');">TAB 1</li>    
  <li class="" id="tab2" onclick="javascript:show_tab('2');">TAB 2</li>    
  <li class="" id="tab3" onclick="javascript:show_tab('3');">TAB 3</li>    
  <li class="" id="tab4" onclick="javascript:show_tab('4');">TAB 4</li>    
 </ul>
</div>

<div id="tabcontent0" class="homepagetabcontent"></div>
<div id="tabcontent1" class="homepagetabcontent"></div>
<div id="tabcontent2" class="homepagetabcontent"></div>
<div id="tabcontent3" class="homepagetabcontent"></div>
<div id="tabcontent4" class="homepagetabcontent"></div>

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.

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.

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.

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;
}

<div id="homepagetabsdiv">
 <ul id="homepagetabs">
  <li class="currenttab" id="tab0" onclick="javascript:show_tab('0');">Main</li>    
  <li class="" id="tab1" onclick="javascript:show_tab('1');">TAB 1</li>    
  <li class="" id="tab2" onclick="javascript:show_tab('2');">TAB 2</li>    
  <li class="" id="tab3" onclick="javascript:show_tab('3');">TAB 3</li>    
  <li class="" id="tab4" onclick="javascript:show_tab('4');">TAB 4</li>    
 </ul>
</div>

<div id="tabcontent0" class="homepagetabcontent"></div>
<div id="tabcontent1" class="homepagetabcontent"></div>
<div id="tabcontent2" class="homepagetabcontent"></div>
<div id="tabcontent3" class="homepagetabcontent"></div>
<div id="tabcontent4" class="homepagetabcontent"></div>

• javascript
• jquery

Share Improve this question Follow asked Jan 31, 2016 at 18:29 MShackMShack 65211 gold badge1818 silver badges3636 bronze badges 6

• So set the css to hidden... Better to do it in CSS than with JavaScript so you do not have a flash of content. Or with my code from my last answer. $("#tab1").click(); – epascarello Commented Jan 31, 2016 at 18:33
• setting with css to display:none , or visibility:hidden , does not help the the load time issue , i'd like to use jquery detach , empty or remove then append content back , or any other way one might suggest – MShack Commented Jan 31, 2016 at 18:37
• 1 Do have a way to have a plain old html file in the domain? If so, I can show you how to use xhr to send content to a div on a click or loading. – zer00ne Commented Feb 2, 2016 at 21:08
• 1 Why are you loading all the tabs content from the begining, instead of loading the content seperatly per request (clicking on tab) via ajax request? (Can you add more html files for this kind of solution?) – ItayB Commented Feb 2, 2016 at 21:15
• 1 @ItayB brilliant idea, by all means, sir you can pursue this endeavor, I will chime in by ment if I have anything relevant to add. ^_^ – zer00ne Commented Feb 2, 2016 at 21:37

 |  Show 1 more ment

3 Answers 3

Sorted by: Reset to default 2 +250

As you described the site, I'm not sure if you have permissions to add your extra *.html files. In case you can, I suggest (as i ment on your question above) to separate the tabs content to different html pages and load them with ajax.

If you CAN'T add your own html files, you can only load everything in display:none; and add some ajax loader gif until everything will be loaded and hide it when finish loading.

Back to my first suggestion (assuming you have permissions to add files):

First you can change your html so there will be one central shared place to show the content:

<div id="homepagetabsdiv">
 <ul id="homepagetabs">
  <li class="currenttab" id="tab0" onclick="javascript:show_tab('0');">Main</li>    
  <li class="" id="tab1" onclick="javascript:show_tab('1');">TAB 1</li>    
  <li class="" id="tab2" onclick="javascript:show_tab('2');">TAB 2</li>    
  <li class="" id="tab3" onclick="javascript:show_tab('3');">TAB 3</li>    
  <li class="" id="tab4" onclick="javascript:show_tab('4');">TAB 4</li>    
 </ul>
</div>

<div id="content" class="homepagetabcontent"></div>

Then, each click will load and change this central place with the new content by:

 function show_tab (tab_id) {
       $.get("content" + tab_id + ".html", function (data) {
           $("#content").empty().html(data);
       });
 }

The new files you should add will be for example:

content1.html:

<p>Content 1 example</p>

content2.html:

<p>Content 2 example</p>

and so on...

Hope it's help, Good luck!

One option would be to store the content of each of these tabs in separate files (e.g. tabs/tab1.html, tabs/tab2.html, etc). When the user clicks on a tab, you call the loadTab function which appends that tab to the body (or wherever it is you need to append it to).

// call this from show_tab
function loadTab(tabId){

  if(!$(tabId).get(0)){
    var tabNumber = tabId.replace("#tabcontent", "")
    jQuery.ajax({
        url: './tabs/tab' + tabNumber + ".html", // Change path depending on file location
        dataType: 'html'
      })
      .done(function(html) {
        jQuery('body').append(html);
      });
  }
}

You could remove the content but keep a reference, and then reattach. The example removes all content, re attaches content 0, then after 4s attaches content 1.

I wrote this on my phone so I can't code format it here :( so jsbin:

https://jsbin./nivutigena/edit?html,js,output