[jQuery] Open/close div problem

[jQuery] Open/close div problem

I have the following script. What i want is to open and close a div
with animation when i click on the red area. The problem is that when
it opens and the width becomes 300px then automatically closes. I
think its because i set the value of the var open to true. Can anyone
help me with this please;
Thanks in advance!
/////////////////////////
JQUERY SCRIPT
///////////////////////////////
$(document).ready(function() {
var open = false;
                        
    if(open == false) {
    
     $("#hotspot").click (
    
     function() {
     $("#menu").animate({ width:300 }, "toggle");
    
     return false;
    
     }
    
     )
    
    open = true;
    
    }
    
    if(open == true) {
        
         $("#hotspot").click (
        
         function() {
    
         $("#menu").animate({ width:10 }, "toggle");
        
         return false;
        
         }
        
         )
        
        open = false;
        
    }
        
});
/////////////////////////////////////////////
HTML
////////////////////////////////////////
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-7" />
<link href="css/testcss.css" type="text/css" rel="stylesheet" />
<script src="lib/jquery.js" type="text/javascript"></script>
<script src="custom.js" type="text/javascript"></script>
<title>Untitled Document</title>
</head>
<body>
<div id="centerer">
<div id="header"></div>
     </ul>
    <div id="menu"></div>
<div id="hotspot"></div>
<div id="main">
    </div>
<div id="footer"></div>
</div>
</body>
</html>
--
Tolis Christomanos
Web Design & Development
http://www.christomanos.com/
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/