Hiding divs on page load with jQuery UI Accordion widget

I'm using jQuery Accordion. When the page loads, all the divs flash for a second before being hidden. I'd like the divs to stay hidden while loading. I thought I was doing that by setting them to hidden via javascript outside of the document ready check like so:

$('#accordion div').hide();
$('#accordion2 div').hide();

jQuery(document).ready(function($) {...

However this isn't working and I suspect it's because I'm using the $ shortcut not yet declared.

How do I开发者_运维百科 get the hide() functions to fire while the page is loading instead of waiting until it is fully loaded and then hiding the divs?

Thanks!

The reason that it's not working is because you are trying to hide the elements before they exist. It would work if you put the code at the end of the page, but even then you are not sure that they are not visible for a split second.

Use CSS to hide them instead, then they are hidden already when they come into existance:

<style type="text/css">

#accordion div, #accordion2 div { display: none; }

</style>

These statements try to hide something that has not been loaded yet:

$('#accordion div').hide();
$('#accordion2 div').hide();

With jQuery you should write this:

$(function(){
    $('#accordion div').hide();
    $('#accordion2 div').hide();
});

So, the code will be executed after the skeleton of html document will be loaded