Question

Scenario:
I’ve a page with multiple DIVs. Some of the DIVs should be hidden on first page load. I’ve used Jquery hide() function to hide the DIVs.

Problem:
For some reason the jquery hide function seems to be working only partially i.e. the DIV that needs to be hidden completely shows for a second and hides.

Is there anyway to resolve this please?

Answer 1

Your javascript won’t be executed until the DOM is ready (you can’t hide an element that doesn’t exist yet) so the browser renders it then hides it. Depending on how fast your browser is and how efficient your code is you may or may not notice it.

A far better solution is to have the element be hidden from it is loaded, using css.

#elementId { display:none; }

You would include this rule within style tags with the rest of your css. If you have many elements that you want to hide/show, give them all a common class name; then you can toggle their visibility all at once. The css for that would be:

.commonClassName { display:none; }

Then in your jQuery you can call .show() to show them, or .toggle() to toggle their visibility on/off. The jQuery class selector is identical to the css one:

$('.commonClassName').show();

Note: You can also make styling changes using the html style attribute:
style="display:none;" But, for the reasons I outline in the comments, this is usually not the route to take.