Question

I have this pretty simple jquery example: http://jsfiddle.net/clifgray/NTd95/1/ and in that jsfiddle it works exactly like I want it to. When I implement it on a webpage with very little difference in the code, except for some preexisting content, the jquery section defaults to showing the content in the hidden div. It still works when I click hide and from there I can show and hide alright but I want it to be hidden when I start the webpage.

Is there any reason that you can think of for this happening?

Answer 1

The problem you are having, is you are using a blanket css rule for all div’s instead of being specific to the divs you are trying to target. My guess is that somewhere on your page you have change the display away from none

Add this before your javascript:

$("#box1, #box2").hide();

…or change your css rule to this:

div#box1, div#box2 { background:#def3ca; margin:3px; width:80px; display:none; float:left; text-align:center; }

…or add this inline with your html:

<div id="box1" style="display:none">