title: jquery expand from (and collapse into) a small square
body: <p>I'd like to create a small 16px square icon that, when clicked, "expands" into a large 600px x 100px banner showing additional content that overlays part of the page. Then the user can click a close button on the banner and it will "collapse" back into the icon. </p>
  
  <p>Essentially I'm looking for an ability to smoothly animate from this:</p>
  
  <pre><code>------------------------------------------------------------------
  |                                                                |
  |                                                       [icon]   |
  |                                                                |
  |                                                                |
  |          Page content here                                     |
  |          more page content here                                |
  |          even more page content here                           |
  |          yet more more page content here                       |
  |          another line of page content                          |
  |          and another.                                          |
  |                                                                |
  |                                                                |
  </code></pre>
  
  <p>To this:</p>
  
  <pre><code>------------------------------------------------------------------
  |                                                                |
  |   ----------------------------------------------------------   |
  |   |                                                    [x] |   |
  |   |                                                        |   |
  |   |      Content inside banner                             |   |
  |   |      goes here                                         |   |
  |   |                                                        |   |
  |   ----------------------------------------------------------   |
  |          another line of page content                          |
  |          and another.                                          |
  |                                                                |
  |                                                                |
  </code></pre>
  
  <p>And then animate back again when the user clicks the close button. </p>
  
  <p>What's a good way to do this with jquery with good performance and browser compatiblity?  </p>
  
  <p>Most of my app's users are on downlevel browsers, so any solution should work on IE7+, iPad2+, and modern desktop and mobile browsers-- although if peformance is awful on old browsers I may just ditch the animation there. </p>