Tabbed Content / Posts /

Content of all tabs visible on page load

54
Thanks for this. I notice that when the page initially loads, content of all tabs are visible for a few seconds before only the default tab content is shown. Any reason for this?
Ismail  11 years ago   viewed: 22413    

10 Answers

6
Hi Joe (and other stuck with this problem),

I've managed to resolve the problem. What Milo means in the above comment is to add style="display:none"; directly into your html div that is holding your tabcontent. 

So, for example:
<div class="tabcontents">
      <div id="tab1">
           tab 1 content here
      </div>
       <div id="tab2" style="display: none;">
           tab 2 content here
      </div>
 </div>

Apply the style="display:none"; to each tab that you don't want to be be seen on the first load of the page containing all the tabs (and their content).

This solved the problem.
invert
  11 years ago
2
Yes adding to each tab div that fixed it - thanks
Joe   11 years ago
2

This is wrong. after click tab also content is not loading

RJ
  5 years ago
0
Hi,

I've come across the same problem. Updating the css to that code does not do the trick (just hides the entire content).

Any idea how to tackle this? Thanks!
invert   11 years ago
0

Hi

I'm having the same issue, any fix for this? It seems like it doesn't cache after the initial load of the page. I have images in the content area for each tab. I'm using it on my homepage so when a visitor navigates away from the homepage, then goes back to the homepage (say by clicking on the logo) the images for each tab are reloaded and are visible for a sec or two.

 

Thanks.

Joe   11 years ago
0

style="display:none" can be used. When the page loads, the contents of the tabs will be displayed

slope ball

stephanilope
  2 years ago
0

Not displayed due to incorrect method. Stay calm and try again step by step  bob the robber

sarahlison
  one year ago
0

thanks for sharing with code

anna
  one year ago
0

You can fix this by hiding all tab content via CSS by default, and only showing the active one once JavaScript takes control dead plate 

Newton Callahan
  one month ago
-1
Would you please try update the tabcontent.css as:
div.tabcontents
{
    display:none;
    ……
}
And let me know the results?
Milo   11 years ago

   

Your name*
Password
(Optional. Used to modify this post afterwords)
+ =  

Ask your Own Question

  • If your question is related to the topic of this post, you can post your question to this page by clicking the "Post a reply" button at left;

  • When you want to start a new page for your question:
▲