Question

I had a web page that I thought had way too much content showing at one time, so I wrote some JavaScript to hide a bunch of images until they were needed. At the bottom of said page I have a link that says, “Click here for Screen Shots!” When clicked the JS will display a previously hidden span that contains all the screenshots. The link text is changed to, “Click here to hide Screen shots.” This works in IE and Firefox, but for some reason not in Chrome (in chrome I have to click the hide link 3 times before the span is hidden again). The code is fairly simple, but I cant figure out what is wrong with it. Any ideas?

The JS:

$('#show').click(function(){
$('#Screenies').show('slow');
$('#show').hide();
$('#hide').show();
});

$('#hide').click(function(){
$('#Screenies').hide('slow');
$('#hide').hide();
$('#show').show();
});

The Html:

 <p id="show" style="cursor:pointer; color:Navy"><u>Click here for sceenshots!</u></p>
 <p id="hide" style="cursor:pointer; color:Navy"><u>Hide sceenshots</u></p>
 <span id="Screenies">
      [Image links in here]
 </span>

Edit:
Forgot to mention I am using Jquery 1.6

Answer 1

This has to do with the fact that you are animating a span element – don’t ask me why. But if you are using semantic markup you should really be using a div to hold your images. I re-factored your code as well, so now you need only 1 link.

$('#show').toggle(function(){
    $('#Screenies').show('slow');
    $('#show').text('Hide');
}, function(){
    $('#Screenies').hide('slow');
    $('#show').text('Show');
});

If you don’t know about the jQuery toggle function read this article, the rest of the code simply animates the element in and then changes the link text based on the current state.