help in overcoming a small problem in the code that I am trying to write

help in overcoming a small problem in the code that I am trying to write

Hello,

I am new to jquery and I'm trying to overcome a small problem in the code that I am trying to write.

I'm trying to write a code that identifies pressing a button and accordingly hides a div or expose a div.

The problem arises when the page first loads, In this situation it takes two clicks on the button for the desired action to occur - instead of one click.
after the two clicks its working great, the problem only occur when the page first loads.

I'd be happy if someone could help me diagnose the problem.

My code is attached as text in the message.

Thanks in advance.

the code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Hidden Div</title>
 
<style type="text/css">

#main{
    width:400px;
    height: 400px;
    background: lightblue;
margin-bottom:20px;
display:block;
}


#btn {
height:50px;
width:30px;
background-color:#006600;
cursor:pointer;
}

</style>

<script src="http://code.jquery.com/jquery-latest.js"></script>

<script language="JavaScript">
   function toggle(id)
   {
   var Odisplay = document.getElementById("main").style.display;
    if (Odisplay == 'block')
     { 
document.getElementById("main").style.display = 'none'
document.getElementById("btn").style.backgroundColor ='blue';
}
    else
     {
 document.getElementById("main").style.display = 'block'
 document.getElementById("btn").style.backgroundColor ='#006600';
}
   }
</script> 
 
 
</head>
 
<body>

<div id="main">
</div>
<div id="btn" onclick="toggle('main');"> Btn </div>
</body>


</html>