Sliding Divs with Percentage Widths
<p>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.</p>

<p><a href="http://jsfiddle.net/establish/scKf2/" rel="nofollow">http://jsfiddle.net/establish/scKf2/</a></p>

<p>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.</p>

<p><a href="http://jsfiddle.net/establish/kjDYh/" rel="nofollow">http://jsfiddle.net/establish/kjDYh/</a></p>

<p><strong>HTML</strong></p>

<pre><code>&lt;div id='ember'&gt;

&lt;div id='sidebar'&gt;
&lt;/div&gt;

&lt;div id='activity'&gt;
    &lt;a href='#' id='trigger'&gt;Nav&lt;/a&gt;
&lt;/div&gt;

&lt;/div&gt;
</code></pre>

<p><strong>CSS</strong></p>

<pre><code>#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;
}
</code></pre>

<p><strong>JS - First Attempt</strong></p>

<pre><code>$('#trigger').click(function() {

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

});​
</code></pre>

<p><strong>JS - Second Attempt</strong></p>

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

<p>​</p>
