Slide in div to push content

Question

Here is a demo of the script I am using to bring in a menu form the left:

Demo Fiddle

The DIV that slides in the from the left will need to push the divs called 'left panel' and 'right panel' out of the way so they slide also. So instead of the hidden DIV to come in and hover over the left panel it will need to push it too.

$(document).ready(function(){
    $('#slide').click(function(){
    var hidden = $('.hidden');
    if (hidden.hasClass('visible')){
        hidden.animate({"left":"-1000px"}, "slow").removeClass('visible');
    } else {
        hidden.animate({"left":"0px"}, "slow").addClass('visible');
    }
    });
});

Answer 1

You can do the following:

In CSS, remove the absolute positioning and set width to 0%.

CSS:

.hidden {
    width:0%;
    background:#f90;
    color:#000;
}

And then, animate the value of width instead of the value of left :

JavaScript:

$(document).ready(function(){
    $('#slide').click(function(){
    var hidden = $('.hidden');
    if (hidden.hasClass('visible')){
        hidden.animate({"width":"0%"}, "slow").removeClass('visible');
    } else {
        hidden.animate({"width":"25%"}, "slow").addClass('visible');
    }
    });
});

DEMO: http://jsfiddle.net/X5mP3/

Also, here's an alternative solution, in which the value of the left margin is animated instead of the width (in that case though, depending on your actual code, you'll probably need to set overflow: hidden to some parent element to hide the div behind it): http://jsfiddle.net/652RY/

Answer 2

You can do this by animating container containing all the three div elements. Animate the conatainers left property with the amount of width your left side menu is having.

http://jsfiddle.net/ZQTFq/1916/

HTML

<div class="container">
    <div class="hidden">Here I am !</div>
    <div class="left">Left panel</div>
    <div class="right">Right panel</div>
    <div class="clear"></div>
</div>
<div>
<a href="#" id="slide">Show/hide Slide Panel</a>
</div>

JS

$(document).ready(function(){
    $('#slide').click(function(){
    var hidden = $('.hidden');
     if (hidden.hasClass('visible')){
        hidden.animate({"left":"0px"}, "slow").removeClass('visible');
    } else {
        hidden.animate({"left":"140px"}, "slow").addClass('visible');
    }
    });
});

CSS

.container{
    position:absolute;
    width:100%;
}
.left, .hidden {
    float: left;
    height:350px;
    position:absolute;
    left:-140px
}

.left {
    width: 50%;
    background: #fff;
    z-index:1;
}

.hidden {
    width:25%;
    z-index:2;
    background:#f90;
    color:#000;
}

.right {
    width:50%;
    float: right;
    height:350px;
    background:#000;
    color:#fff;
}

.clear {
    clear:both;
}

#slide{
    position:fixed;
    bottom:0;
}
}