Question

I have this html:

<div class="box">
     <div class="info">
          <p>..some content..</p>
          <a href="#" class="close">Close</a>
     </div>
</div>
<div class="box">
     <div class="info">
          <p>..some content..</p>
          <a href="#" class="close">Close</a>
     </div>
</div>

Since I don’t know .box height as it will expand and its height will depend on .info content, i run this:

 $('.box').each(function() {
     $(this).data('height', $(this).height());
 });

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.

I tried to run this, which is inside another function and it doesn’t get the correct height:

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

Anyone?

Answer 1

In regards to your .close method:

$(".close").click(function (e) {
    e.preventDefault();
    $(".info").empty();
    $(".box").width(251);
    $(".box").data('height'); // Just retrieves the height value
});

I think you’re trying to do this?

$(".close").click(function (e) {
    e.preventDefault();
    $(".info").empty();
    $(".box").width(251);
    // Sets the element's height to the stored height value
    $(".box").height( $(".box").data('height') );
});