jQuery - Having a DIV autohide at startup safely

Question

Is it possible to set the CSS properties of a DIV to not initially display, and then have jQuery show it at a later time?

I have some popup bubbles on my website that I do not want to show if JavaScript is disabled.

Currently I have calls to hide all elements when the page loads via jQuery, and only show them when the proper button is clicked.

However, disabling JavaScript will force those bubbles to appear on the page.

If I tweak the display or visibility settings of these divs, it seems that I cannot use jQuery to make them show on the click event.

Is there some manner of autohiding these without breaking jQuery functionality?

Answer 1

Just add the css attribute of display:none to the divs you want hidden. Then you can use jquery's .show() to unhide these divs when you want to show them later.

Answer 2

The jQuery show/hide functions do not work with visibility. If you set display: none, it should work just fine. If, however, you use visibility: hidden, they won't work correctly.