I've got few divs on my website - on the load I want some of them to be hidden, some shown. I am hiding the ones I don't want like this:

$(".divToHide").hide();

It works well in Chrome, Firefox, IE8 an Opera... It doesn't in IE6 (I haven't tested on previous version yet...) - when I load the page all the divs are hidden properly. When I click a link that makes one of them visible it appears correctly. The problems shows when I click on a different link that's supposed to hide the first div and show another. The text of the first div is hidden, but the image stays and obstructs the newly shown div. I'm pretty sure it's a bug - when I zoom in or out of the page the divs that were supposed to be hidden disappear suddenly - they're only visible when I load the page.

Is there a way around it?

EDIT: I'm using jQuery v1.3.2

EDIT: Unfortunately the solution of using addClass to add css class that states display: none doesn't really work - it seemed like it did at first, but the problem is still there.

UPDATE: The js file I wrote can be found here, while the html here. The problem I have is that when you go from one portfolio to the other, the image of the first one stays there obstructing the next, even though it should be hidden (text underneath changes correctly). Wrong disappears when you try to zoom in/out of the page.
I used to hide all portfolios using $("#divId").hide(), but as was pointed out below, I now use $(".classToHide").hide().

UPDATE: The problem is solved on IE8 - I forgot to include the standards mode declaration... However, on IE6 it's still the problem.

I've got few divs on my website - on the load I want some of them to be hidden, some shown. I am hiding the ones I don't want like this:

$(".divToHide").hide();

It works well in Chrome, Firefox, IE8 an Opera... It doesn't in IE6 (I haven't tested on previous version yet...) - when I load the page all the divs are hidden properly. When I click a link that makes one of them visible it appears correctly. The problems shows when I click on a different link that's supposed to hide the first div and show another. The text of the first div is hidden, but the image stays and obstructs the newly shown div. I'm pretty sure it's a bug - when I zoom in or out of the page the divs that were supposed to be hidden disappear suddenly - they're only visible when I load the page.

Is there a way around it?

EDIT: I'm using jQuery v1.3.2

EDIT: Unfortunately the solution of using addClass to add css class that states display: none doesn't really work - it seemed like it did at first, but the problem is still there.

UPDATE: The js file I wrote can be found here, while the html here. The problem I have is that when you go from one portfolio to the other, the image of the first one stays there obstructing the next, even though it should be hidden (text underneath changes correctly). Wrong disappears when you try to zoom in/out of the page.
I used to hide all portfolios using $("#divId").hide(), but as was pointed out below, I now use $(".classToHide").hide().

UPDATE: The problem is solved on IE8 - I forgot to include the standards mode declaration... However, on IE6 it's still the problem.

• javascript
• jquery
• internet-explorer
• html
• hide

• 1 Why are you using an id to hide multiple divs? Possibly the bug is related to incorrect id usage. – Wolfr Commented May 3, 2009 at 20:21
• 1 if you could provide a link to your source, it might be helpful for solving your problem. – tester Commented May 3, 2009 at 20:22

5 Answers 5

You're hiding multiple div's by using an ID selector?

Try giving those div's a class "divToHide" and then use:

$(".divToHide").hide();

Maybe IE8 handles duplicate id's in another way than those other browsers..

Just a thought: you're not using an old (pre-IE8) version of jQuery, are you?

Edit: No, grycz is using the current version.

Edit: simplified to use toggleClass()

You could try doing it manually, like toggling a css class called "hidden." It might look something like this:

function myToggle(element_id)
{
    mydiv = $('#' + element_id);
    mydiv.toggleClass("hidden");;
}

And your css file would have:

.hidden
{
    display:none;
}

I haven't tested this, but this is the kind of workaround I imagine you'd want to think about if this is, indeed, a bug in jQuery/IE8.

Are you sure that hide() function call is even getting called on the page load? Try putting an alert('hi') right before that function call, and see if that happens in IE8.

try

$("#divToHide").css('display:none');