richrock Posted November 9, 2012 Share Posted November 9, 2012 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. Link to comment https://forums.phpfreaks.com/topic/270509-slidetoggle-between-min-height/ Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.