CODEWITHSUNDEEP
jqueryinternet-explorergoogle-chrome
Doug Molineux
Doug Molineux

Reputation: 12431

JQuery Change CSS Display not working

I have this working on chrome and firefox basically when the user clicks on a sub image it changes the main image by altering it's display property from hide to show. Here's my img elements.

<img id="lg1" src="http...
<img id="lg2" style="display:none" src="http...
<img id="lg3" style="display:none" src="http...

and my js looks like this:

    $('#graph1').click(function() {
    $("#lg1").css("display","inherit");
    $("#lg2").css("display","none");
    $("#lg3").css("display","none");
});

$('#graph2').click(function() {
    $("#lg1").css("display","none");
    $("#lg2").css("display","inherit");
    $("#lg3").css("display","none");
});

$('#graph3').click(function() {
    $("#lg1").css("display","none");
    $("#lg2").css("display","none");
    $("#lg3").css("display","inherit");
});

In IE I get this error:

Could not get the display property. Invalid argument.

Is there anyway I could alter my code to make it work with Chrome, FF and IE?

Thanks!

Upvotes: 1

Views: 7074

Answers (1)

T.J. Crowder
T.J. Crowder

Reputation: 1074385

"inherit" is not a valid display value on IE, unfortunately. You could try "", it should work (live example) barring some stylesheet rule saying otherwise for that element (like this).

Off-topic, but if you want a shorter way to write .css("display", "none") you can use .hide() instead. :-)

Upvotes: 6

Related Questions