need help linking javascript and stylesheet properties

http://allforchrist.cjb.net

My problem is that I'm trying to use javascript to control the visibility property of an iframe and a div element. The iframe is visible by default and the div element is hidden. I want them to switch when I click a button but its not working. I've tried everything possible and it still is not working. I'm so frustrated...I'd be glad if someone could help me quickly...Thanks in advance!


Here are samples of the iframe, the div element and the javascript code I was trying to use.

iframe::
<IFRAME name="calendar" src="calendar.asp" width="180" height="118" style="position:absolute; left:527px; top:200px; visibility:visible" scrolling="no" frameborder="0"> </IFRAME>

div::
<div class='bigpic' style="visibility:hidden; border:1px">
<image ='center' height='90px' width='50px' src="../images/pics/tony01.jpg">
</div>


Javascript::
<script language="Javascript">
document.calendar.visibility='Hidden';
document.bigpic.visibility='Visible';
</script>

document.calendar.visibility='Hidden';

is the wrong syntax; you probably picked that up from using IE4's dodgy document.all collection. If you use

document.getElementById("calendar").style.visibility="hidden";

it should be okay

Thanks brothercake...that helped! but the it doesn't seem to work with the div element..... it gives an error message that says object required.

Hey It's me again. I found the problem.....I was using "name" property on the div instead of "id". It's working seamlessly now. Thanks!!