jQuery code working everywhere but IE, why?

Question

The following code works fine in browsers other than IE. In IE, only the #toggle-instructions handler works, but #toggle-cue-sheet-instructions does not. Anyone know why IE has trouble with this? What happens is that clicking on the link with id=toggle-cue-sheet-instructions does nothing while clicking on the link with id=toggle-instructions works fine. I tried toggle, but, if I recall correctly, I had an issue with it in one of the browsers and went this route instead (which isn't my preference). Everything works perfectly in Safari and Firefox (what else is new right?).

$(document).ready(function(){
  $("#toggle-instructions").click(function() {
    if ($("#download-items #instructions").is(":hidden")) {
      $("#download-items .instructions-link a").text("Hide download instructions");
      $("#download-items #instructions").slideDown("slow");
    }
    else {
      $("#download-items .instructions-link a").text("View download instructions");
      $("#download-items #instructions").slideUp("normal");
    }
    return false;
  });
  $("#toggle-cue-sheet-instructions").click(function() {
    if ($("#prs-info-container #instructions").is(":hidden")) {
      $("#prs-info-container .instructions-link a").text("Hide cue sheet instructions");
      $("#prs-info-container #instructions").slideDown("slow");
    }
    else {
      $("#prs-info-container .instructions-link a").text("View cue sheet instructions");
      $("#prs-info-container #instructions").slideUp("normal");
    }
    return false;
  });
});

Answer 1

Looking at your code, it appears as though you are using the instructions ID more than once.

If that's the case, you need to change your HTML markup so you're not reusing an ID more than once. IDs on a page must be unique.

It is these two lines that cause me to think that you are reusing instructions as an ID

  $("#download-items #instructions").slideDown("slow");
  ...
  $("#prs-info-container #instructions").slideDown("slow");

If you try to select using an ID that is not unique, things will break.

Generally the solution is to use a class instead of an ID if you need/want to have multiple.

This is what those two lines would look like if instructions was a class.

  $("#download-items .instructions").slideDown("slow");
  ...
  $("#prs-info-container .instructions").slideDown("slow");

Now the . class selector is used instead of the # ID selector.

Of course you'll need to change your HTML markup as well to use class="instructions" instead of id="instructions".