style.display not working properly

[gsimpson]

Can anybody help me with whats wrong on this?

When I click the Plus.jpg image, it should make the span display change to block, but it is not.

<img style="cursor:hand" border="0" src="../../Images/Minus.jpg" width="12" height="12" onclick="Box4.style.display='none'">
<b>
&nbsp;
<img style="cursor:hand" border="0" src="../../Images/Plus.jpg" width="12" height="12" onclick="Box4.style.display='block'">
&nbsp;Priorities
</b>
<hr size="1">
<span id="Box4" style="Display: None">
<font color="#CC0000">
</font>
<a style="background-color: #FFFFFF" onmouseover="this.style.backgroundColor='#DFDFDF'" onmouseout="this.style.backgroundColor='#FFFFFF'" href="test.ppt">
<font color="#000080">
test.ppt
</font>
</a>
<br>

<br>

</span>

[cmarshall]

Can anybody help me with whats wrong on this?

When I click the Plus.jpg image, it should make the span display change to block, but it is not.

<img style="cursor:hand" border="0" src="../../Images/Minus.jpg" width="12" height="12" onclick="Box4.style.display='none'">
<b>
&nbsp;
<img style="cursor:hand" border="0" src="../../Images/Plus.jpg" width="12" height="12" onclick="Box4.style.display='block'">
&nbsp;Priorities
</b>
<hr size="1">
<span id="Box4" style="Display: None">
<font color="#CC0000">
</font>
<a style="background-color: #FFFFFF" onmouseover="this.style.backgroundColor='#DFDFDF'" onmouseout="this.style.backgroundColor='#FFFFFF'" href="test.ppt">
<font color="#000080">
test.ppt
</font>
</a>
<br>

<br>

</span>

Classic problem.

Try this: document.getElementById('Box4')

Also, I don't recommend using onmouseover/out to highlight a link. Use a separate a:hover, a:active style instead.

[cmarshall]

Since I'm on a lecturing roll...

Don't directly manipulate styles if you can help it. The only time I do it is to force IE to redraw.

Instead, change the className. This allows you to make some pretty radical changes in a separate CSS file.

i.e. Instead of:

getElementById('Box4').style.display=

do this:

getElementById('Box4').className=

You can declare a class that has a display:none, but you might want to have a different one for printing. For example, I have an implementation with a hide/show functionality, but when I print, they are all displayed.

You can also get pretty complex with CSS. I consider it a challenge to use as little JavaScript as possible.

If you want to see some VERY cool CSS stuff, then check out Stu Nicholls' CSS Playground [cssplay.co.uk]. Simply amazing.

[gsimpson]

Thanks, I got it working, but I never even thought of using CSS to do this stuff. Im new to using javascript. Been using ASP for awhile now, never really worked with CSS too much either. Thanks for the insight, and the link :).

[penders]

Just my 2 cents worth...

cursor:hand;

(to make the mouse cursor into a hand/pointer) is IE only. The correct/cross-browser value is

cursor:pointer;

(works with IE, FF, Opera...).