Problem using JQuery to animate div to 100% height
<p>Hi I'm using Jquery to animate a div from a set height to 100% and back to a set height again. This is used to show/hide text from a wordpress post that is longer then the set height (overflow is hidden). I'm not able to animate the div from the set height to 100% -- instead the div jumps to 100% of the height. It does animate back to it's set size smoothly. I can't fix a height for it to animate to because the posts will always have a different height according to how much has been written.</p>

<p>Here's the JQuery code:</p>

<pre><code>$(document).ready(function(){

     $(".read_more").toggle(function(){
     $(this).prev(".entry").animate({height:"100%"}, {
 queue:false,
 duration:1000,
 easing: "easeOutQuart"});
     },

function(){  

        $(this).prev(".entry").animate({height:"5.9em"}, {
     queue:false,
     duration:1000,
     easing: "easeOutQuart"});

});         
});
</code></pre>

<p>The CSS:</p>

<pre><code>.entry {

     float:left;
     position:relative;
     width:870px;
     height:5.9em;
     overflow:hidden;
     padding: 0px 10px 10px 10px;
     display:block;
}
</code></pre>

<p>Basically the .entry div is wrapped in a container that positions the post heading, post and a post divider. The animation works if I plug in a set value but no luck getting the 100% to work. Any ideas?</p>

<p>Here's the full jquery (the yellow_read, invistext and gray_read are text that when clicked trigger the animation and change from expand to collapse.</p>

<pre><code>$(document).ready(function(){
     $(".read_more").toggle(function(){
     $(this).prev(".entry").animate({height:"100%"}, {
 queue:false,
 duration:1000,
 easing: "easeOutQuart"});
     $(this).children(".yellow_read").css("display","none");   
     $(this).children(".invistext").css("display","inline");
     $(this).children(".gray_read").css("display","none");
},

function(){  
    $(this).prev(".entry").animate({height:"5.9em"}, {
 queue:false,
 duration:1000,
 easing: "easeOutQuart"});
$(this).children(".yellow_read").css("display","inline");   
    $(this).children(".invistext").css("display","none");
    $(this).children(".gray_read").css("display","inline"); 
});     

});
</code></pre>

<p>Here's the full css</p>

<pre><code>  #content{
   width:1000px;
   margin-left:16em;
   padding-top:15em;
   position:absolute;
   overflow:hidden;
   display:block;
   }

   *:first-child+html #content{
    height:1000px;
    position:relative;
    float:left;
    width:400px;
    padding: 0px 0px 0px 0px;

    }

   .post{
   float:left;
   position:relative;
   margin-bottom:10px;
   padding:9px
   }

   .post p{
    font-size:.9em; /*controls the post body when WP sIFR is off*/
    line-height:1.8em; /*controls the post body when WP sIFR is off*/
    }

   .post p a:hover, .post p a:active{ color: #ed1c24; text-decoration:none;}



   .postHeading{
    float:left;
    position:relative;
    width:870px; 

    }

    .postTitle{
     float:left;
     position:relative;
     padding:5px 7px 5px 7px;

     }

     * html .postTitle{
      width:860px;
      padding:5px 7px 5px 7px;
     }

    .postTitle h2{
     line-height:1.2;
     margin:0;
     padding:0;
     color:#ed1c24;
     font-size:1.8em;
    }



   .entry {
       float:left;
    position:relative;
    width:870px;
    color: #fff;
    height:5.9em;
    overflow:hidden;
    padding: 0px 10px 10px 10px;
    display:block;
    }


   .entry a a:link, .entry p a:visited{ color:#fff200; text-decoration:none;}



   .read_more {    
    width:870px;
    font-size:14px;
    color: #999999;
    float:left;
    position:relative;
    padding: 10px 5px 10px 10px;
    cursor:pointer;
    }

    * html .read_more{
     width:870px;
     }


   SPAN.gray_read{    
    color: #999999;
    font-size:.8em;
    }


   SPAN.yellow_read{
    color: #fff200;
    font-size:.8em;
    }

   SPAN.invistext{
    display:none;
    color: #ff5d00;
    font-size:.8em;
    }

   .divider {  
    background:url(images/divider.png) no-repeat center;
    width:680px;
    height:6px;
    float:left;
    position:relative;
    }

     * html .divider{
      width:680px;
     }
</code></pre>

<p>and the html:</p>

<p></p>

<pre><code>&lt;div id="content"&gt;



&lt;?php if (have_posts()) : ?&gt;

 &lt;?php while (have_posts()) : the_post(); ?&gt;

  &lt;div class="post" id="post-&lt;?php the_ID(); ?&gt;"&gt;

   &lt;div class="postHeading"&gt;

    &lt;div class="postTitle"&gt;
     &lt;h2&gt;&lt;?php the_title(); ?&gt;&lt;/h2&gt;
    &lt;/div&gt;&lt;!-- post title ends --&gt;
   &lt;/div&gt;&lt;!-- post heading ends --&gt;


&lt;div class="entry"&gt;


    &lt;?php the_content('Read the rest of this entry &amp;raquo;'); ?&gt;
</code></pre>

<p></p>

<pre><code>&lt;div class="read_more"&gt;
    &lt;span class="gray_read"&gt;Read &lt;/span&gt;
     &lt;span class="yellow_read"&gt; More &lt;/span&gt;
      &lt;span class="gray_read"&gt; +&lt;/span&gt;
       &lt;span class="invistext"&gt; Collapse -&lt;/span&gt;
&lt;/div&gt;
</code></pre>




<p></p>

<pre><code>&lt;?php endwhile; ?&gt;

&lt;?php else : ?&gt;

 &lt;h2 class="center"&gt;Not Found&lt;/h2&gt;
 &lt;p class="center"&gt;Sorry, but you are looking for something that isn't here.&lt;/p&gt;
 &lt;?php include (TEMPLATEPATH . "/searchform.php"); ?&gt;

&lt;?php endif; ?&gt;
</code></pre>

<p>Thank you</p>
