How to hide elements with jQuery before they get rendered?

Question

I want to generate html layout with areas (divs, spans) that can be shown/hidden conditionally. These areas are hidden by default.

If I call .hide() method with jque

Answer 1

After some time of thinking I've got the idea to the following solution. Compared to my other solution I have reduced it to the essential part (and used this to add a class by JS):

    


    

        

        
Content that should be initially hidden if possible.
    

The script tag gets executed immediately and adds a class to a container. Within this container there are some nested elements that get now hidden because the container has got the special class and there is a CSS rule that now has an effect.

Again, this happens before the remaining html gets processed (prevents blinking). And also, if JS is disabled, all the elements are visibly by default - what may be called Progressive enhancement.

Not sure if this works in every browser. But IMO it would be simple and neat solution.