Toggle display on/off not working in IE!! Arg!!!

[Yourself]

I have the following simple Javascript:

<script language="JavaScript" type="text/JavaScript">
<!--
function ToggleVisibility(panelId) {
var pnl = document.getElementById(panelId);
alert(pnl.style.display);
if (pnl.style.display == 'none')
{
alert('going to set to block');
pnl.style.display = 'block';
alert('now set to block');
}
else
{
alert('going to set to none');
pnl.style.display = 'none';
alert('now set to none');
}
}
//-->
</script>

and I have this markup:

<a href="#" onclick="javascript:ToggleVisibility('testid');">Click Me</a>

<div id="testid" style="display:none;">
Hello
</div>

Now when I click the 'Click Me' link, the div toggles on and off fine in
Firefox.

However, in IE the div is never shown, despite the correct alerts being
fired (i.e. I get a 'none', 'going to set to block', 'now set to block'
message sequence).

WTF is going on??

 

[Evertjan.]

Yourself wrote on 23 mei 2006 in comp.lang.javascript:

I have the following simple Javascript:

<script language="JavaScript" type="text/JavaScript">

do not use language="JavaScript"

<!--

do not use <!--

function ToggleVisibility(panelId) {
var pnl = document.getElementById(panelId);
alert(pnl.style.display);
if (pnl.style.display == 'none')
{
alert('going to set to block');
pnl.style.display = 'block';
alert('now set to block');
}
else
{
alert('going to set to none');
pnl.style.display = 'none';
alert('now set to none');
}
}
//-->

do not use //-->

</script>

and I have this markup:

<a href="#" onclick="javascript:ToggleVisibility('testid');">Click
Me</a>

<div id="testid" style="display:none;">
Hello
</div>

Now when I click the 'Click Me' link, the div toggles on and off fine
in Firefox.

However, in IE the div is never shown, despite the correct alerts
being fired (i.e. I get a 'none', 'going to set to block', 'now set to
block' message sequence).

In my IE your code, though having some antiques, works as expected.

WTF is going on??

Either you are using something els as IE6,
or you made a mistake you do not show us.

Try this simplified code:

<script type="text/JavaScript">
function ToggleVisibility(panelId) {
var pnl = document.getElementById(panelId);
pnl.style.display =
(pnl.style.display == 'none')
? 'block'
: 'none';
}
</script>

<a href="#" onclick="javascript:ToggleVisibility('testid');">
Click Me</a>
<br><br>
<div id="testid" style="display:none;">
Hello
</div>