IE javascript - document.getElementById

Question

Hi Im trying to hide/show a series of panels. It works in FF but not IE. Ive added this to the bottom of the page to hide all of them and then show the first panel

function clearem(){
document.getElementById("panel01").style="display:none";
document.getElementById("panel02").style="display:none";
document.getElementById("panel03").style="display:none";
document.getElementById("panel04").style="display:none";
document.getElementById("panel05").style="display:none";
document.getElementById("panel06").style="display:none";
document.getElementById("panel07").style="display:none";
document.getElementById("panel08").style="display:none";
document.getElementById("panel09").style="display:none";
document.getElementById("panel10").style="display:none";
document.getElementById("panel11").style="display:none";
}
function showem(mrfoo){
clearem();
document.getElementById("panel"+mrfoo).style="display:block!important"; return false
}
clearem();
showem("01");

theyre triggered manually by:

<a href="#rail" onMouseOver="showem('09')" onClick="showem('09')">Railway</a></li>

Any ideas what im doing wrong?

UPDATE - ive moved the display out of the quotes. it doesnt work offline but does online!

Answer 1

You are assigning a string to the style property.

Assign your values though style.display instead.

Answer 2

you should be doing:

document.getElementById("panel11").style.display="none";