Slidetoggle Between Min Height

[richrock]

Hi,

 

I've been looking at using slideToggle() in jQuery for expanding hidden content. Unfortunately, to make it pretty standard I have opted to fix the text height, and need to expand to 100% of the content....

 

slideToggle() performs the required animation, but toggles between coompletely hidden and the starting height...

 

for($b = 0; $b < $num_bios; $b++) {
if(($b > 0 ) && ($b%2 == 0)) {
$margins = ' style="margin-right: 20px;"';
} else {
$margins = ' style="margin-right: 20px;"';
}
?>
<div class="box-wide" <?php echo $margins; ?>>
<div class="heading"><div class="icon-bio"><h2>Biography</h2></div></div>
<div class="inner">
<h4 class="label">Biography from: <?php echo $this->bios[$b]->book_title; ?></h4>
<div class="first_content"id="extra_<?php echo $b; ?>">
<p><?php echo $this->bios[$b]->content; ?></p>
</div>
</div>
<div class="morelink" style="border: 1px solid red; padding-right: 28px; text-align: right;"><a href="#" id="morelink_<?php echo $b; ?>">Read more</a></div>
</div>
<?php
}

 

This is the loop of boxes, set to min-height of 350px; the content in first_content is set to 230px, which splits the content line nicely. And I know the margins is duplicated, but I'll sort that after.

 

Then the jQuery thus far:

 

<script type="text/javascript">
$(document).ready(function(){
// Hide boxes as soon as DOM ready
//$('#extra_0').hide(); // Commented to see if it toggled from the set height up but it hid instead,

// Toggle the hidden slickbox
$('#morelink_0').click(function() {
//var id = $(this).attr('id'); // For when I figure this, it's in a loop.
//var newid = id.replace("slick-toggle","#extrainfo"); // Same here.
$('#extra_0').slideToggle(400);
return false;
});
});
</script>

 

Can this be done? The total heights will vary, but the starting point is always 230px; Hence a toggle between a low height and the entire content, whatever that may be.

 

TIA.