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. 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'>
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>
