title: jQuery animate to height of container
body: <p>I know a few solutions to this but not the one I want.</p>
  
  <p>I want the height of the animation to be the height of the container when the text fades in.</p>
  
  <p>This is what I've tried so far:
  fiddle: <a href="https://jsfiddle.net/jzhang172/rxbnnvdf/1/" rel="nofollow">https://jsfiddle.net/jzhang172/rxbnnvdf/1/</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(function(){
  $('.box').click(function(){
  var heightbox = $(this).innerHeight();
  var heightparagraph=$(this).find('p').innerHeight();
  var trueheight=heightbox+heightparagraph;
  console.log(heightbox);
  console.log(heightparagraph);
  console.log(trueheight);
  $(this).animate({height: trueheight}, {duration:500});
  $(this).find('p').fadeIn(1000);
  });
  
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.box{
    width:100%;
    height:50px;
    border-bottom:1px solid black;
    cursor:pointer;
    overflow:hidden;
  }
  .box h2{
    margin:0px;
    padding-top:25px;
  }
  body,html{
    padding:0;
    margin:0;
    
  }
  .box p{
    display:none;
  }
  *{
    box-sizing:border-box;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="box one"&gt;
    &lt;h2&gt;
    Box One
    &lt;/h2&gt;
    &lt;p class="info"&gt;
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae tortor id massa tempus ultricies in a diam. Aliquam consectetur dui arcu, non volutpat mauris tempor eget. Donec et nibh ornare, pretium lorem nec, sagittis dui. Donec efficitur pulvinar mauris eget fringilla. Donec vulputate lectus suscipit mauris egestas mollis. Donec at risus dolor. Sed tincidunt, enim nec pharetra condimentum, massa eros condimentum nisi, ac ullamcorper erat lacus et urna. Proin urna sapien, convallis vel tellus vitae, vulputate congue mi.
    &lt;/p&gt;
  &lt;/div&gt;
  &lt;div class="box two"&gt;
      &lt;h2&gt;
    Box Two
    &lt;/h2&gt;
      &lt;p class="info"&gt;
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae tortor id massa tempus ultricies in a diam. Aliquam consectetur dui arcu, non volutpat mauris tempor eget. Donec et nibh ornare, pretium lorem nec, sagittis dui.
    &lt;/p&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>