Jquery show/hide: hidden slowly in Internet Explorers results in awful effect.. ideas?

Question

Hi guys, I implemented this Jquery show/hide code and everything works fine except that the box that I want to hide, with slow javascript browsers (IE 6) is hidden after the webpage has been loaded (or at least all the JS). And as the page is pretty complex this takes a while resulting in the very bad effect of displaying contents and then it gets hidden.. Awful..

I do know that I can set the TO_HIDE_BOX display=none with CSS and then change it later with js, but I don't what to do that because people without js enabled won't be able to see the hidden contents.

Do you guys have ideas on how to remove this awful effect?

Answer 1

You can put .showDivWithNoJS { display: none; } in your css and the class (which you'll probably want to give a shorter name :) on the elements you want hidden, then do this at the top of the page:

<noscript>
  <style type="text/css">.showDivWithNoJS { display: block; }</style>
</noscript>

This shows your elements with a nice effect if they have JavaScript enabled, and if not it shows them immediately, since they're not getting the show effect anyway.