Sliding Divs with Percentage Widths

1
votes

I have 2 divs, 70% and 30% widths, within a 100% width containing div. On click I want the 70% div to change to 100% width and 'slide over' the 30% div and on second click retract back to 70% and reinstate the 30% div. I've half achieved the desired effect below; it 'slides over' the smaller div but retains it's 70% width. I can't get the width to expand to 100% without having a stutter animation as I've invoked the width change after the toggle or it expanding to 100% but the other 30% div still being visible and knocking the divs onto 2 lines.

http://jsfiddle.net/establish/scKf2/

I did see another similar question that works but they are static widths and I couldn't successfully convert them into percentages without the above problems cropping up again.

http://jsfiddle.net/establish/kjDYh/

HTML

<div id='ember'>

<div id='sidebar'>
</div>

<div id='activity'>
    <a href='#' id='trigger'>Nav</a>
</div>

</div>

CSS

#sidebar { 
background-color: green; 
float: left;
height: 200px;
position: relative;
z-index: 5;
width: 30%;
}

#activity { 
background-color: purple; 
float: left;
height: 200px;
position: relative;
z-index: 10;
width: 70%;
}

a { 
color: white;
display: block; 
padding: 12px; 
text-decoration: none;
}

JS - First Attempt

$('#trigger').click(function() {

$('#sidebar').animate({width: 'toggle'});

});​

JS - Second Attempt

$('#trigger').toggle(function() {
    $('#sidebar').animate({width: '+=22em'});
    $('#activity').animate({width: '-=22em'});
},function() {
    $('#sidebar').animate({width: '-=22em'});
    $('#activity').animate({width: '+=22em'});
});​

​

3
jquery

3 Answers

3
votes

You can do something like this?

http://jsfiddle.net/kjDYh/2/

basically set the nav to 0px and main to 100%?

$('#trigger').toggle(function() {
    $('#sidebar').animate({width: '100%'});
    $('#activity').animate({width: '0px'});
},function() {
    $('#sidebar').animate({width: '70%'});
    $('#activity').animate({width: '30%'});
});​
0
votes

Why not just set the width % in your jquery call?

$('#trigger').click(function() {

    $('#sidebar').animate({width: '100%'});
    $('#activity').animate({width: '0px'});

});​

etc

Toggle, with new button to click back.

http://jsfiddle.net/zWxUj/10/

0
votes
$('#trigger').toggle(
    function() {
        $('#activity').animate({width: '100%'});
        $('#sidebar').animate({width: '0%'});
    },
    function() {
        $('#activity').animate({width: '70%'});
        $('#sidebar').animate({width: '30%'});
    });

Does this work?

jsfiddle