title: roll up and open a page on click
body: <p>What I'm trying to do is:</p>
  
  <ul>
  <li>after clicking the button, the part of the page (where the actual button is placed + some more items) are being rolled up (slided up) and after this is done</li>
  <li>the user is being taken to another page</li>
  </ul>
  
  <p>The code I've done so far is the following (obviously not working):</p>
  
  <pre><code>&lt;div id="content"&gt;
      &lt;div&gt;
          &lt;p&gt;something anything&lt;/p&gt;
          ...
      &lt;/div&gt;
  &lt;a id="roll"&gt;&lt;img src="_images/butt-submit.png"&gt;&lt;/a&gt;
  
  &lt;/div&gt;
  
  
  &lt;script&gt;
  
  $('#roll').click(function() {
       $('#content').animate({
            "width" : "100%",
            "height" : "0px"
           }, function() {
       $(this).load('index2.html');
          });
  });
  
  &lt;/script&gt;
  </code></pre>
  
  <p>Could you please help me with this?</p>