JQuery Change CSS Display not working

Question

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!

Is there any way you could change Inherit to something else? Whats it inheriting from? ie. display: block — benhowdle89
– benhowdle89, Commented Dec 1, 2010 at 18:19

T.J. Crowder · Accepted Answer · 2010-12-01 19:00:37Z

6

"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. :-)

edited Dec 1, 2010 at 19:00

answered Dec 1, 2010 at 18:18

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

JQuery Change CSS Display not working

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related