title: How to smoothly extend a DIV height as the HTML contents are changed with jQuery & jQuery UI
body: <p>I have a DIV that is empty upon page load, and depending on the dropdown selection above, the contents of it change.. it could be 1 row of content, it could be 7 rows, totally all over the place (but no more than 10 rows). </p>
  
  <p>So far, based on the AJAX query (which returns a JSON array of the rows to display) is managing to insert the HTML into the DIV that I am targeting. </p>
  
  <pre><code>$.post('/ajax_subareas', {areaid: areaid},
      function(data){
          if(data.code==1) {
              var subareashtml = '';
              var count = 0;
              $.each(data.subareas, function(key, value){
                  subareashtml = subareashtml+'&lt;input type="checkbox" name="listing_subarea" id="listing_search_subarea_'+key+'" value="'+value+'" rel="'+key+'"&gt;&lt;label for="listing_search_subarea_'+key+'"&gt;'+value+'&lt;/label&gt;&lt;br /&gt;';
                  count++;
              });
              $('#listing_search_subareas').html(subareashtml);
          }
      }, 'json'
  );
  </code></pre>
  
  <p>What I want to achieve: </p>
  
  <p>I want to be able to see the DIV smoothly extend in height (there's elements below this DIV so it pushes things down). SO far this just jumps the whole content downwards. Is there a way to achieve that? The height is always variable, so that's why this is tough. </p>
  
  <p>I could of course, put it into an invisible DIV first, and get the height of the content, and set the height of the mother div aftewards using the animate() function but I'm wondering if there's a more straight-forward way built into jQuery and jQuery UI. </p>