Q: Moving two div elements in parallel 
*

*When div1 is clicked div2 should open.

*Both div1 and div2 should move at the same time.

*On the click of div1, and div1 should go to its old position.


How to achieve this?

when i click the above div,both div should open like this.

This is my code on div1 onclick
$("#div2").toggle(function(){
        if($("#div2").is(":visible")){ frmWidth = "240"; }
        if($("#div2").is(":hidden")){ frmWidth = "-60"; }

        $("#div1").css("right",frmWidth+"px");
    });


A: *

*Wrap both your elements inside a parent DIV

*Animate the parent


A: html: 
<div class="div2"></div>
<div class="div1"></div>

css: 
body {overflow:hidden;}
.div2 {
    background: #ccc;
    width:100px;
    height: 500px;
    float: right;
    margin-right:-100px;


}
.div1 {
    background: #eee;
    width:100px;
    height: 500px;
    float: right;

}

js: 
$true = 1;
$('.div1').click(
    function() {
        if ($true == 0) {
            $('.div2').animate({'margin-right':-100 });
            $true = 1;
        } else {
        $('.div2').animate({'margin-right':0 });
         $true = 0;
        }


});

see: https://jsfiddle.net/LL9gy2dc/
