jQuery slide toggle animation together with other elements

html, jquery, jquery-animate, toggle

Solution

I have used `animate()`

Check out this jsFiddle

$(".myButton").click(function () {
var effect = 'width';
var duration = 500;
//if the current width is 200px, then the target width is 0px otherwise the target width is 200px
var targetWidth = $('#myDiv').css("width")=="200px"?"0px":"200px";
//Check if the div was hidden then display it
if(!$("#myDiv").is(":visible")){
     $("#myDiv").show();   
}
$('#myDiv').animate({width: targetWidth},duration,function(){
    if($(this).css("width")=="0px"){
         $(this).hide();   
    }
    else{
     $(this).show();   
    }
});
});

I have modified the CSS for `#myDiv` and added

overflow:hidden;

Edit:

I have modified the "margin-left" property instead of the "width" property

check out the updated version at this jsFiddle

$(".myButton").click(function () {
var effect = 'width';
var duration = 500;
//get the outer width of the div
var divOuterWidth= $("#myDiv").outerWidth();
divOuterWidth+= 8; //the margin on the body element

var targetMargin = $('#myDiv').css("margin-left")==((-divOuterWidth)+"px")?"0px":(-divOuterWidth)+"px";

$('#myDiv').animate({marginLeft: targetMargin},duration);
});

Problem

I'm trying to implement slide toggle from left to right and vice-versa using jQuery `toggle()`. Toggle works, but I want the next element to div being toggle to animate smoothly parallel to toggle effect. Check code I tried: jsFiddle HTML ``` <button id="button" class="myButton">Run Effect</button> <div id="myDiv"> <p>This div will have slide toggle effect.</p> </div> <div class="other_details"> This should move parallel with re-size of div being toggled. </div> ``` jQuery ``` $(".myButton").click(function () { var effect = 'slide'; var duration = 500; $('#myDiv').toggle(effect, {direction: "left"}, duration); }); ``` CSS ``` #myDiv { color:Green; background-color:#eee; border:2px solid #333; text-align:justify; float:left; width:200px; } .other_details{ float:left; font-weight:bold; width:200px; border:1px solid black; padding:5px; margin-left:2px; } ``` You can see in output, that `"other_details"` div isn't moving parallel with toggle effect. Its moving only after completion of toggle effect. Please help me to get solution.

Original source