How to Load the JS Content of Hidden Div while page loading

Question

I have a div which is Hiddeb like tab menu. Each tab has Js code but only the first one is loading. The hidden tabs are not loading. I search all but I cannot find the working answer for my case. I want all hidden ul should load at the time of loading of page and for user it should only the first menu:

<ul id="core"> //Only this is visible
     <li>
             Table here....
     </li>
<ul id="jquerytuts" class="hide">
     <li>
             Table here....
     </li>    
<ul id="classics" class="hide">
     <li>
             Table here....
     </li>

<style>
.hide = display:none;
</style

Answer 1

First make it as display:block. And as soon as page is loaded make it "hide."

Like this .(Using jquery )

Html :

<ul id="core"> //Only this is visible
     <li>
             Table here....
     </li>
<ul id="jquerytuts" class="hide">
     <li>
             Table here....
     </li>    
<ul id="classics" class="hide">
     <li>
             Table here....
     </li>

<style>
.hide { display:block};
</style>

JS:

$(function(){

  $(".hide").css("display","none");

});