Toggle width with jQuery
<p>How do I toggle the width of a div with animation?</p>

<p>HTML:</p>

<pre><code>&lt;div id="toggle-button"&gt;&lt;/div&gt;
&lt;div id="toggle"&gt;&lt;/div&gt;​
</code></pre>

<p>css:</p>

<pre><code>#toggle{
  height:200px;
  width:200px;
  background:red;
}
#toggle-button{
  height:20px;
  width:20px;
  background:blue;
}
</code></pre>

<p>jQuery:</p>

<pre><code>$(document).ready( function(){
  $('#toggle-button').click( function() {
    $('#toggle').toggle(function() {
      $('#toggle').animate({width:"200px"});
    }, function() {
      $('#toggle').animate({width:"300px"});
    });
  });
});​
</code></pre>

<p>Example that doesn't work:
<a href="http://jsfiddle.net/ZfHZV/1/" rel="nofollow">http://jsfiddle.net/ZfHZV/1/</a></p>

<p>Edit: My goal is to change the width when I click on the blue div</p>
