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>
<html>
<head>
<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);
background-repeat:repeat-x;
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%;}
</style>
<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>
<script src="main.js"></script>
<script src="ajax.js"></script>
</head>
<body>
<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--->
</body>
</html>