CODEWITHSUNDEEP
jqueryhtmljquery-animatetoggle
Ravi Dhoriya ツ
Ravi Dhoriya ツ

Reputation: 4414

jQuery slide toggle animation together with other elements

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.

Upvotes: 3

Views: 3758

Answers (1)

Dola
Dola

Reputation: 1483

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

Upvotes: 5

Related Questions