Question

I’d like the .left div (width:20%;) to slide into the .right div (initial width:100%;) and have the .right div resize on animation to width:80%;

Basically, slide in a div and have the other resize.

http://jsfiddle.net/LTUTR/

HTML

<div class="container">

<div class="left">
    <p>left</p>
</div>
<div class="right">
    <p>right content</p>
    <p class="showLeft">[Show left div]</p>
</div>

​

CSS

html, body {
    width:100%;
    height: 100%;
    margin: 0;
}

.container {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.left, .right {
    float: left;
    height: 100%;
}

.left {
    background: green;
    width: 20%;
    display: none;
}

.right {
    background: red;
    width: 100%;
}

.showLeft {
    cursor: pointer;
}
​

JS

$('.showLeft').click(function(){
    $('.right').animate({width: '80%'},350);    
    $('.left').animate({width:'toggle'},350);
});

Answer 1

Unfortunately, width:'toggle' doesn’t exist…Actually, it exists! It’s in the specs:

In addition to numeric values, each property can take the strings
‘show’, ‘hide’, and ‘toggle’. These shortcuts allow for custom hiding
and showing animations that take into account the display type of the
element.

I really don’t know why it’s not working here. And show seems buggy (little flashy demo).

Anyway, you can set the initial width to 0:

.left {
    background: green;
    width:0;
    display: none;
}

And use this edited function:

$('.showLeft').click(function(){
        $('.right').animate({width: '80%'},350);
        $('.left').css('display','block').animate({width:'20%'},350);
});

Demo