I have a DIV defined with a fixed height:
.w {
height: 100px;
overflow: hidden;
}
if I put text in this it will hide everything that goes beyond the 100px. I have a button that shows all text, basically it does this:
$('.w').height('auto');
this will make all text visible, but I would like to animate this. And that won't work with height='auto', it has to have a specific height.
The question: how do I get the height the DIV should be to be able to show all text in it?
try scrollHeight
like this:
$('#ID_OF_DIV')[0].scrollHeight
Note [0]
, as it is property of DOM elements.
You could set the height to 'auto', then measure it, then set it back and start the effect.
Something like this (live example):
jQuery(function($) {
// Div starts with "style='height: 10px; overflow: hidden"
var div = $('#thediv');
// On click, animate it to its full natural height
div.click(function() {
var oldHeight, newHeight;
// Measure before and after
oldHeight = div.height();
newHeight = div.height('auto').height();
// Put back the short height (you could grab this first
div.height(oldHeight);
div.animate({height: newHeight + "px"}, "slow");
});
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With