jQuery slideToggle "flicker" on page load

Question

I know there are many questions about jQuery slideToggle "flickering" but I haven't seen any that specifically address this flicker upon page load.

Click here for the working example.

If you click Refresh or click on another datasheet page (under the Datasheets & Product Info section), when the page loads, the hidden div "flashes" the expanded content and then quickly collapses. I notice this in Firefox, not so much in IE or Chrome. What can I do to prevent this? Does this depend on the speed with which the page loads?

Also, please excuse the nightmarish tabulated code. I inherited this from a previous developer. We are planning to go back and correct this in a later phase, but I'm wondering if there is a quick fix for this issue now.

Thanks!

Answer 1

Maybe display:none for elements like #mover2 ? (of course, that also mean no graceful degradation)

EDIT (a reply to another question) To avoid using #id, #id1, #id2 in your css, you can simply add an extra class to those divs, like hideThis.

Then, in CSS you can just add: .hideThis {display:none; }

Answer 2

This has to do with the latency of the javascript in Firefox on loading I believe.

I addressed this by, as Ionut Staicu suggests, hiding them in the .CSS which is likely faster than the hide method.

I would also try $('[id=^mover]').hide(); instead of all the individual ones like $('#mover1').hide();