CODEWITHSUNDEEP
jqueryhtmlcss
user1040259
user1040259

Reputation: 6509

Resize divs on slide

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

Upvotes: 2

Views: 3969

Answers (3)

Mark Toth
Mark Toth

Reputation: 31

Here's the code to smoothly animate back and forth. We're just looking at the width of the left div to decide how to proceed codehttp://jsfiddle.net/marktoth/W7UwU/7/

Upvotes: 3

Giona
Giona

Reputation: 21114

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

Upvotes: 3

SpYk3HH
SpYk3HH

Reputation: 22570

Try:

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

Upvotes: 0

Related Questions