CODEWITHSUNDEEP
jqueryhtmlcss
netdigger
netdigger

Reputation: 3789

Set div height to was it was before changing it manually

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)

Upvotes: 1

Views: 144

Answers (4)

dxc
dxc

Reputation: 1051

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/

Upvotes: 1

netdigger
netdigger

Reputation: 3789

I found one way I can get the same effect, by using jQuerys slideUp() and slideDown() instead of doing it "manually".

Then it'll be something like this: http://jsfiddle.net/YfV7G/9/

Upvotes: 2

bukart
bukart

Reputation: 4906

Use the value auto for the height

$('#container').height( 'auto' );

Upvotes: 2

Alex
Alex

Reputation: 349

height:initial
overflow: visible

upd: add 'show' button to your example, http://jsfiddle.net/YfV7G/6/

Upvotes: -1

Related Questions