jQuery .hide() not working in IE

Question

Hello,

I have a few span elements that I am hiding via CSS (display: none;). When the page loads, I would like the first span element to show which in all browsers, except IE7, seems to be the case. Anyone have any clue as to why this might be happening? There isn't any crazy code that would cause this problem, it simply just isn't working.

jQuery v1.4.2

<script type="text/javascript">
    $(document).ready(function() { 
        $('span.player').hide();
        $('span.player:first').show();
    });
</script>

<span class="player" style="display: none;">Player embed code</span>
<span class="player" style="display: none;">Player embed code 2</span>

Thanks, Jake

Answer 1

If youve hidden these elements via a stylesheet and not via the style attribute on the element thats the issue.

Answer 2

The code properly hides the elements and shows the first, per your full code.

http://jsfiddle.net/LBjQD/5/

Answer 3

Without showing us the full source code it is hard to know what your problem is, and we're left with having to take random guesses. From what I know the code is perfectly valid and the fact it works in other browsers means you probably included everything correctly. So this is a little confusing.

I would start by including a DOCTYPE if you haven't already. It is possible that IE is in quirks mode and that is rarely good.

Also, are you using prototype on the page as well as jQuery? This could be a $ conflict in which case you will need to call jquery in a non-conflicting way, like:

jQuery(document)....