Need Help With jQuery Hidden Div

Question

I have a jquery code where when I click on a peice of text another div appears above it, but the div just go's on top of the original div, but what i want is for the new div to push the orignal div down with it.

This is the code

HTML:

  <div id="social">Content to Show</div>  
  <div id="joinus">  <center><a id="activator" href="#">Join Us</a></center></div>
  <div id="outerbody">

CSS:

#joinus {
    background-image:url(../IMG/JoinUsBottom.png);
    width:327px;
    height:83px;
    position:absolute;
    left:755px;
    font-size:30px;
}
#social {
    background-image:url(../IMG/JoinUsTop.png);
    width:327px;
    heght:99px;
    position:absolute;
    left:755px;
    display:none;
}

jQuery Code:

 <script type="text/javascript">
        $(function() {
         $("#activator").click(function(){
          $("#social").slideToggle("slow");
         });
        }); 
 </script>

Thanks

Answer 1

Put both in a parent div, which is positioned absolute.

<div id="wrapper">
<div id="social">Content to Show</div>  
<div id="joinus">  <center><a id="activator" href="#">Join Us</a></center></div>
</div>

#joinus {
    background-image:url(../IMG/JoinUsBottom.png);
    height:83px;
    font-size:30px;
}
#social {
    background-image:url(../IMG/JoinUsTop.png);;
    height:99px;
    display:none;
}
#wrapper {
    width:327px
    left:755px;
    position:absolute;
}

Answer 2

You got no opening div of #outerbody in you example. Anyway, what I suggest, is:

<div id=outer style='position:absolute'>
  <div id=moreinfo style='position:nothing!, display:none'> bla bla bla
  <div onclick=showmoreinfo>button</div>
</div>

Answer 3

Here is an example page: http://www.capsule.hu/help/slide_content.html - just wrap the two divs into a wrapper div and use position: absolute property for that with the same horizontal dimensions... but check the source and it will be clear