Hi Guys,

I have two javascript onloads in my form which seem to be cancelling each other out. The first- onload="checkMyBox"- works fine, which means the calendar stays hidden until the ckeckbox is clicked.
However the second script that is supposed to show text ("I am an organized person") only after image is clicked does not work. It always shows the text.

I tried playing with it, and realized that if I erase the first <body onload="checkMyBox('c2','div1')"> the second onload works, meaning that the text will stay hidden until I click on image.

Does anybody know why is that and how I can fix it?
Any help appreciated.
Thank you.


Code JavaScript:
<script type="text/javascript"> 
function checkMyBox(trigger,toggled){        
var mcb = document.getElementById(trigger);        
var cal = document.getElementById(toggled);        
if(mcb.checked == false){            
cal.style.display = 'none';        } else {            
cal.style.display = 'block';        }    };
</script>
 
<style type="text/css">
<!-- 
.hidden {display:none} 
-->
</style>

HTML Code:
<form action="register-civ.php" method="post" name="example">
<body onload="checkMyBox('c2','div1')">
<input type="checkbox" name='c2' id="c2" value="check me 2" onclick="checkMyBox('c2','div1')"> Specific date<p/>
<div id="div1">
calendar I have for user
</div></body>
<br />

<body onload="document.getElementById ('bettie-bio').className = 'hidden'">
<div style="text-align: left;">
<img alt="Click for example" onclick="document.getElementById ('bettie-bio').className = document.getElementById ('bettie-bio').className == 'hidden' ? '' : 'hidden'" src="images/example_0.jpg">
</div>
<p id="bettie-bio">I am an organized person.</p>
</body></form>