Hiding divs on page load with jQuery UI Accordion widget

Question

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!

Answer 1

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>