CODEWITHSUNDEEP
javascriptjquery
MShack
MShack

Reputation: 652

Remove tab content on page load , then add back when tab clicked

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>

Upvotes: 2

Views: 2874

Answers (3)

nanobar
nanobar

Reputation: 66345

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.com/nivutigena/edit?html,js,output

Upvotes: 2

ItayB
ItayB

Reputation: 11337

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 comment 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!

Upvotes: 2

adilapapaya
adilapapaya

Reputation: 4795

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

Upvotes: 2

Related Questions