Yes, I know the title sounds a little suspicious. I will try to explain this the best I can...
The code below is supposed to have the blue div slide down beside the red div. (Directly to the right - using the position() utility of jQuery UI) The first time you hit the Show the div button, it works. Also, the Hide the div works.
Then when I click to show the div again, it appears to the right of where it is supposed to be! Why is this?!?
Note: You can find a live example of the code here
<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" xml:lang="en" lang="en">
<head>
<title>Demo</title>
<style type='text/css'>
#red {
background-color: red;
width: 200px;
height: 150px;
position: absolute;
}
#blue {
background-color: blue;
width: 150px;
height: 200px;
position: absolute;
display: none;
}
#tester_1 {
top: 300px;
left: 300px;
position: absolute;
}
#tester_2 {
top: 350px;
left: 300px;
position: absolute;
}
</style>
</head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jqueryui.js"></script>
<script type='text/javascript'>
function Show()
{
$('#blue').position({
of: $('#red'),
my: 'left top',
at: 'right top'}).slideDown();
}
function Hide()
{
$('#blue').hide();
}
</script>
<body>
<div id='red'></div>
<div id='blue'></div>
<button id='tester_1' onclick='Show()'>Show the <kbd>div</kbd></button>
<button id='tester_2' onclick='Hide()'>Hide the <kbd>div</kbd></button>
</body>
</html>