Question

I commonly use hidden divs on my pages until they need to be unhidden with javascript. I used to do the initial hiding with javascript too, but now moved away to hiding them with css to guarantee that the hiding takes place (js disabled in the browser). Also there was a latency issue with js hiding (waiting for the js to load).

My problem is that with css, there’s still some latency, and so I end up including the style with the markup like below, and I kind of hate doing it, makes me feel like I’m doing something wrong..

<div style="display:none;">
   content
</div>

How often do you guys do this? and is there a way I can get the css or js to somehow load BEFORE the rest of the markup?

Thanks in advance

Answer 1

Include the css in an inline style block at the top of the page:

<style>
  .hidden:  { display: none; }
</style>

Then annotate your div with the needed class:

<div class="hidden"> ... </div>

The upshot of this approach is that to show the element, you don’t need to set display to block, you can just add/remove the class from the element with JavaScript. This works out better because not every element needs display=block (tables and inline elements have different display modes).

Despite what another poster said, it’s not bad practice. You should separate your CSS into presentational and functional markup – functional one controls such logical things as whether or not something gets shown, presentational one just determines how to show it. There is no issue putting functional CSS inline to avoid the page jumping around.