Question

I have made an example: http://jsfiddle.net/YfV7G/4/

It’s a div like this

<div id="container">
    <h2>The header</h2>
    <a href="#">One of dynamic ammount of links</a>
    <a href="#">One of dynamic ammount of links</a>
    <a href="#">One of dynamic ammount of links</a>
    <a href="#">One of dynamic ammount of links</a>
    <a href="#">One of dynamic ammount of links</a>
</div>

That I change the height of by:

$('#container').animate({
    height: '5px'
}, 1000, null);​

Css is overflow:hidden

I change the height to only show the topmost part of a div.

But what should I set the height to to get it back and show the full content?

One way I could think of myself is to save it before making it smaller. Is there another option?
(That way wont for if there is content changes after the height is saved, which it might)

Answer 1

You could store the initial height in a rel attribute and retrieve it later. Something like this:

var container = $("#container");

container.attr('rel', container.height()).animate({
    height: '40px'
}, 1000, null);

container.hover(
  function() {
    $(this).height(container.attr('rel'));
  },
  function() {
    $(this).animate({
      height: '40px'
    }, 1000, null);
  }
);

Example:
http://jsfiddle.net/kvZ26/

EDIT:
This is the updated answer which should work with dynamically generated content. Depending on your styling you might need to use .outerHeight() when retrieving the value.

var container = $("#container");

container.attr('rel', container.height()).animate({
    height: '40px'
}, 1000, null);

container.hover(
  function() {
    var height = $("#container > h2").height() + ($("#container > a").height() * $("#container > a").length);
    $(this).height(height);
  },
  function() {
    $(this).animate({
      height: '40px'
    }, 1000, null);
  }
);

(You might want to tweak it so you don’t need to duplicate the container id).

Example:
http://jsfiddle.net/xDCsY/1/