jQuery hide/show method behaviour in IE7

Question

Hi,

I'm having a problem with the jQuery hide() and show() methods. Below is a snippet from a project I'm currently working on. This code comes from a multi-page form which is loaded in it's entirety, then jQuery is used to show and hide the various pages. I should metion that this technique works in every broswer except IE7.

//Hide all pages of the form
$("#client_form div[id*='client']").hide();
//Show just the first page
$("#client_form div#client1").show();

The issue is not that the hide() fails but that the subsequent show() doesn't bring the desired page back. I've tried using different methods like slideUp() and slideDown(), I've tried doing css("display","none"), various other ways to perform the hide/show.

I've also tried chaining methods, doing callbacks from hide to then show. Nothing seems to work properly in IE7.

Any thoughts oh mighty Stack Overflow hive mind?

Many thanks, Neil

Answer 1

have you tried adding a class to all the divs you are trying to hide, and hiding that class. Also change your show selector to use $("#client1") instead of that huge selector.

Answer 2

What about just:

$("#client1").show();

Not sure that's it, but give it a shot? IDs should be unique so no need for the hierarchical selectors.

Answer 3

Have you tried just using the id(s) of the DIVs? Since they are unique to the page, you shouldn't need to make them relative to the form.

$("div[id*='client']").hide().filter('#client1').show();

Note the chaining so it doesn't need to retraverse the DOM, but simply filters the elements that it has already found.

Answer 4

Have you done a simple test to make sure that your second jQuery is returning the correct object(s), if it's returning anything at all? eg:

alert($("#client_form div#client1").length);

or

alert($("#client_form div#client1").get(0).innerHTML);

or

alert($("#client_form div#client1").eq(0).text());

etc?

This would be the first place I would start - you'd then know whether you had a problem with the show() method, or the behaviour of the jQuery selector.

Answer 5

You might also try running your final HTML markup through a validator to see if there are any errors. IE7 is more strict than most other browsers.