Question

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 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.