javascript - Make the second div be next to the first div when using toggle -

when toggling, second div appears on bottom first appears on top. there way make second div on left of first div when toggling?

thanks in advance.

http://jsfiddle.net/kfmlv/1862/ 

html

slide toggle right left , left right.

<hr/> <p>     <select class="myselect">         <option value="right">right</option>         <option value="left">left</option>         <option value="up">up</option>         <option value="down">down</option>     </select>     <select class="myselect2">         <option value="left">left</option>         <option value="right">right</option>         <option value="up">up</option>         <option value="down">down</option>     </select>     <button id="button" class="mybutton">toggle</button> </p> <div id="mydiv">     <p>lorem ipsum dummy text of printing , typesetting industry. lorem ipsum has been industry's standard dummy text ever since 1500s, when unknown printer took galley of type , scrambled make type specimen book. has survived not 5 centuries, leap electronic typesetting, remaining unchanged. popularised in 1960s release of letraset sheets containing lorem ipsum passages, , more desktop publishing software aldus pagemaker including versions of lorem ipsum.</p>     <p>it long established fact reader distracted readable content of page when looking @ layout. point of using lorem ipsum has more-or-less normal distribution of letters, opposed using 'content here, content here', making readable english. many desktop publishing packages , web page editors use lorem ipsum default model text, , search 'lorem ipsum' uncover many web sites still in infancy. various versions have evolved on years, accident, on purpose (injected humour , like).</p> </div> <div id="mydiv2">     <p>it long established fact reader distracted readable content of page when looking @ layout. point of using lorem ipsum has more-or-less normal distribution of letters, opposed using 'content here, content here', making readable english. many desktop publishing packages , web page editors use lorem ipsum default model text, , search 'lorem ipsum' uncover many web sites still in infancy. various versions have evolved on years, accident, on purpose (injected humour , like).</p> </div> 

javascript

$(".mybutton").click(function () {  // set effect type var effect = 'slide';  // set options effect type chosen var options = {     direction: $('.myselect').val() }; var options2 = {     direction: $('.myselect2').val() }; // set duration (default: 400 milliseconds) var duration = 500;  $('#mydiv').toggle(effect, options, duration); $('#mydiv2').toggle(effect, options2, duration); 

});

wrap #mydiv , #mydiv2 in element relative position , give absolute position #mydiv , #mydiv2.

css:

#mydiv,#mydiv2{     position:absolute;     top:0; } .relative{     position:relative; } 

html:

<div class="relative">     <div id="mydiv">...</div>     <div id="mydiv2">...</div> </div> 

see updated fiddle here.