Hide class before document

I have about 20 tabs which are placed underneath the content (not on-top as usual) with large content (forms,inputs) on each tabs.

Problem is that when the users visit the site, they see all the content before the tabs hide. Is there a way to prevent this? I am using jQuery tabs as simple as:

$(window).load(function() {
    $(".tab_content").hide();$(".tab_content:first").show();
});

I was thinking if there is a way to hide .tab_cont开发者_开发知识库ent without jQuery? So I can load jquery at the end asynchronously. I would imagine, loading jquery and then hiding tabs takes time. But yet again I was thinking that, in order to hide .tab_content you need the content so, maybe there is no way around it? Thanks alot

the hide comes into play after the DOM is ready or the element you are applying hide is inside the DOM so a better way is to add a class that hides the element

.tab_content
{
   display: none
}

and

$(function(){
$(".tab_content:first").show();
});

If you simply want to hide then you can use pure CSS:

.tab_content{
   display:none;
   /* or */
  visibility:hidden;
}

Once your page has loaded and jQuery is ready you can then show it as required.

Use CSS to hide the tabs by default:

.tab_content { display: none; } 

Show them when ready.

You can prevent showing them by default using css.

.tab_content { display: none; }

the best way is to do it in css, that way it will never show up when the page loads

.tab_content { display: none }