J Query Slide Down

[emvy03]

Hi guys,

I'm messing about trying to suss how to do a slide down box that appears when the user clicks a link inside a fixed header at the top. The slide function works, I think, but it will slide down and then 'jump' to the left once it has completed the sliding action.

 

Below is the code I am using:

<script language="javascript" type="text/javascript">

$(document).ready(function() {
$("#open").click(function(){
	$("div.hiddenDiv").slideDown("slow");

});	

$("#close").click(function(){
	$("div.hiddenDiv").slideUp("slow");	
});	

});
</script>
<style type="text/css"> 
.hiddenDiv{
display:none;
height:150px;
width:200px;
background:yellow;
position:relative;
top:36px;
left:780px;
}
</style>

 

and the HTML:

<div id='headercontainer'>
<ul id='header'>
<li><a href='#'><img src='images/twitter.png' alt=''></a></li>
<li style='float:left;'><input type='text' id='search' value='Search...'></li>
<li><a href='#'><img src='images/facebook.png' alt=''></a></li>
<li><a id='open' href='#'><img src='images/shopcart.png' alt=''></a></li>
</ul>
<div class="hiddenDiv">
<!--Content goes in here -->
<a id='close' href='#'>Close</a>
</div></div><!-- Close Header Container -->

 

Any help would be greatly appreciated and of course I will post any other code if required.

Many thanks.

[emvy03]

I think I have solved it by changing position to fixed.

Thanks.