Besoin d'aide avec jQuery Div Div

Question

J'ai un code jquery où quand je clique sur un morceau de texte une autre div apparaît au-dessus, mais la div va juste au-dessus de la div originale, mais ce que je veux est pour la nouvelle div pousser le div orignal avec lui.

Ce 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; 
} 

code jQuery:

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

Merci

Answer 1

Placez les deux dans un div parent, qui est positionné en absolu.

<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

Vous n'avez pas de div d'ouverture de #outerbody dans votre exemple. Quoi qu'il en soit, ce que je suggère, est:

 
<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

Voici un exemple de page: http://www.capsule.hu/help/slide_content.html - juste envelopper les deux divs dans un div wrapper et position: propriété absolue pour que les mêmes dimensions horizontales ... mais vérifiez la source et il sera clair