Home/ Questions/Q 746767
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-14T14:07:43+00:00

Yes, I know the title sounds a little suspicious. I will try to explain

  • 0

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Try just resetting the blue div… I did this and it appears to work on Chrome and IE now.

    function Hide()
{
    $('#blue').css({ left: 0, top: 0 }).hide();
}
    • 0