Open and close of menu

Hello All,

below is my code which shows or hides a menu on click. Here when a page is loaded the menu comes in open stage and when you click on top header it gets closed. I want it to appear as closed and only on user click, it gets open. What changes should i made here.

<!doctype html>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="js/jquery-1.4.2.js" type="text/javascript"></script>
<style type="text/css">
<!--.brightRed {	color: #F00;}
h1 { display:inline;	}
h2 { display:inline; }
h3 { display:inline;	}
.boxHeader {	border:#999 1px solid; background-color: #FFF; background-image:url(style/accountStrip1.jpg); 
padding:3px; color:#060; 
text-decoration:none; width:96%; font-size:10px;}
.boxHeader a:link {	color: #060;	text-decoration:none;}
.boxHeader a:hover {	color: #000;	text-decoration:none;}
.editBox {	display:none;border:#999 1px solid; background-color: #FFF; padding:3px; color:#060; text-decoration:none; width:96%;}
#menuheader{ height:auto; border:#039 2px solid; width:13%;}
<script language="javascript" type="text/javascript">
 function toggleSlideBox(x)
 {		if ($('#'+x).is(":hidden"))
 {			$(".editBox").slideUp(200);			
$('#'+x).slideDown(300);		} 
else {			$('#'+x).slideUp(300);		}}

function toggleSlideBox1(x)
 {		if ($('#'+x).is(":hidden")) 
{			$('#'+x).slideDown(200);			
$(".jo").slideUp(300);		} 
else {			$('#'+x).slideUp(300);		}}
<script src="main.js"></script>
<script src="ajax.js"></script>
<div id="menuheader">
<div class="boxHeader"> <a href="#" onclick="return false" onmousedown="javascript:toggleSlideBox1('jo');">       
<h2>Security Settings</h2> </a>     
  <div id="jo">
<div class="boxHeader"> <a href="#" onclick="return false" onmousedown="javascript:toggleSlideBox('picBox');">      
 <h2>Hi</h2> </a>      
 </div><!---end of boxHeader--->     
 <div class="editBox" id="picBox">      
<div style="padding:2px;"> Say:Hello</div>      
</div><!---end of editbox--->      
<div class="boxHeader"> <a href="#" onclick="return false" onmousedown="javascript:toggleSlideBox('proset');">       
<h2>Bye</h2> </a>       
</div><!---end of boxHeader--->      
<div class="editBox" id="proset">     
 <div style="padding:2px;"> Tata </div>      
</div><!---end of editbox---></div></div>
</div><!---end of menuheader--->

It’s hard to help with this because the linked files are missing. Perhaps post a working demo at CodePen and then paste the URL here?