title: How can I get the hidden div height for this accordion style show/hide function?
body: <p>I'm trying to make this show hide run smoothly. When I use simply </p>
  
  <p><code>$(this).find(".less").toggleClass("more");</code></p>
  
  <p>It works well but it's jumpy so I've attempted to add <code>.animate</code> for the height however it's not possible to use height <code>auto</code> in jQuery. How can I make this accordion slide up and slide down the way it's built?</p>
  
  <p>Any suggestions are welcome. Here is a link to a fiddle: <a href="https://jsfiddle.net/jennbrewer/ad42504c/8/" rel="nofollow noreferrer">https://jsfiddle.net/jennbrewer/ad42504c/8/</a></p>
  
  <pre><code>$(function accordion(){
          $(".accordion").click(function() {
  
  
               $(this).find(".less").toggleClass("more");
  
               var height = $('.accordion .less').show().height();
               $('.accordion .less').hide();
  
               $('.accordion .less').show();
  
               console.log(height);
  
              if ( ($(this).find('.less').hasClass('more')) ) {
  
                      $(this).find('.less').animate({
                          height: height,
                      },400)                       
                  } else {
  
                   $(this).find('.less').animate({
                          height:"20px",
                      },400) 
                  }
                  return false;
  
             });
      });
  </code></pre>