title: How to animate a div opening to the size of its content
body: <p>I would like to animate the opening of a div to adjust to the size of its content. The content comes from a separate search that I call with a .load so it could be as small as a single line (no result) or could include multiple results that are hundreds of pixels long. I have scanned many postings on this and tried a variety of things but so far haven't gotten any results.</p>
  
  <p>My latest idea is to start the animation a small amount so that it appears to be opening and then set the height to auto so it will jump to the final size. The result is that the first animation occurs but the height stays where it set it. The following is taken from my document ready function:</p>
  
  <pre><code>$( "##TwoSearch" ).click(function() {
      $("##div1").animate({ height:0 }, 500).empty(); &lt;!--- close div 1 ---&gt;
      $("##div2").animate({ height:200 }, 500);
      SW=document.getElementById("SearchWords").value;
      $("##div2").load("TwoSearchExercise.cfm?SW=" + encodeURI(SW), function () {
          $('.js-lazyYT').lazyYT(); 
          $("##div2").css('height','auto');
          });
      }); 
  </code></pre>
  
  <p>Is there a clean way to do this? I've tried to pull the height from inside the div but it doesn't seem to do anything.</p>
  
  <p>PS: This is a ColdFusion app so please ignore the ## notation.</p>