close and reset height and width to its original sizes on "close" click
<p>I have this html:</p>

<pre><code>&lt;div class="box"&gt;
     &lt;div class="info"&gt;
          &lt;p&gt;..some content..&lt;/p&gt;
          &lt;a href="#" class="close"&gt;Close&lt;/a&gt;
     &lt;/div&gt;
&lt;/div&gt;
&lt;div class="box"&gt;
     &lt;div class="info"&gt;
          &lt;p&gt;..some content..&lt;/p&gt;
          &lt;a href="#" class="close"&gt;Close&lt;/a&gt;
     &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>Since I don't know .box height as it will expand and its height will depend on .info content, i run this:</p>

<pre><code> $('.box').each(function() {
     $(this).data('height', $(this).height());
 });
</code></pre>

<p>When I click "close" once .box has expanded, I should be able to close expanded .box and reset its height and width to its original sizes before it was expanded.</p>

<p>I tried to run this, which is inside another function and it doesn't get the correct height:</p>

<pre><code>$(".close").click(function (e) {
    e.preventDefault();
    $(".info").empty();
    $(".box").width(251);
    $(".box").data('height');
});
</code></pre>

<p>Anyone?</p>
