From overflow: hidden to fit text height

[Silvar]

Okay, I'm using jquery because I have a site with some items that got a + and a - When I click plus I use jquery animate(height) to open the div and when i click minus, it goes back to normal height.

I'm using the function right now where it sets the height of the container to 250px, and everything works.

But when the item expands, I want the height of the <div> to fit the text.

The parent got "overflow: hidden" and the inside div got full height underneath, but is hidden because of overflow property.

 

So we want this overflow:hidden; div to not hide the overflow, but fit the text.

 

Heres my jQuery code:

<script type='text/javascript'>
$(document).ready(function() {
var open = false;
$('#plusminus<?php echo $i; ?>').click(function() {
if (open) {


$('#item<?php echo $i; ?>').animate({height:'80px'});
$('#plusminus<?php echo $i; ?>').attr('src', './images/plus.png');
} else {


$('#item<?php echo $i; ?>').animate({height:'250px'});
$('#plusminus<?php echo $i; ?>').attr('src', './images/minus.png');
}
open = !open;
});
});
</script>

 

How do I fix this?

[BagoZonde]

If you want fit whole text, just change overflow: hidden; to overflow: none; when expanded.

 

$('#item<?php echo $i; ?>').parent().toggleClass('not_overflow');

 

And add .not_overflow class in CSS:

 

.not_overflow{
  overflow: none;
}

 

Obviously pay attention about inheritance of .not_overflow class.

[Adam]

You don't need to specify a height here: http://jsfiddle.net/prt7b/