Take the 2-minute tour ×

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

share|improve this question
add comment

5 Answers

up vote 2 down vote accepted

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.


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

share|improve this answer
Performance question -- is having the .filter('#client1') going to be faster or slower than just doing $('#client1')? I'd think being able to let jQuery use getElementById would be fastest. (and no, downvote wasn't me, I got hit too) –  Parrots Jan 12 '10 at 21:22
Filter will simply look through the array of elements to see if one of them matches the selector. It should be much faster than going back through the entire DOM. –  tvanfosson Jan 12 '10 at 21:23
OK, cool, thanks, always wondered that. –  Parrots Jan 12 '10 at 21:23
Thanks so much for this, your solution proved ideal and IE7 is now behaving itself. –  Neil Albrock Jan 12 '10 at 22:17
add comment

What about just:


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

share|improve this answer
add comment

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.

share|improve this answer
add comment

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);


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


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


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.

share|improve this answer
Care to comment on the downvote? My intention was to point him towards some checks to do which would help him work out the answer himself - the above code was not intended to be an answer in of itself. Fair enough that as it's not an answer as such, it doesn't get a vote up, but a down vote? –  Graza Jan 12 '10 at 21:26
Drive-by downvoter, I suspect. Normally I'd avoid alerts but seeing as it's IE7 that may be better than debugging, though, with IE8 I'd probably fire up the developer tools. –  tvanfosson Jan 12 '10 at 21:32
add comment

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.

share|improve this answer
add comment

Your Answer


