Animated toggle width from x pixels to y pixels

Animated toggle width from x pixels to y pixels

Hi,

I have the following code:

  1. <style type="text/css">
  2.       #toggle {width: 100px; height: 100px}
  3. </style>
  4. <div id="toggle">
  5.       <a href="#" id="toggle-button">Click me</a>
  6. </div>

What I want to do is animate the div so that it extends to 400px wide when the toggle link is clicked.  Then animate it back to 100px when the link is clicked again.

Using the toggle function, I can only seem to show/hide the div completely, but I just want to change the width.

I'd like to do this in a neat a way as possible.  Can anyone suggest how this can be done?

Thanks!