title: jQuery add animation when change CSS height property
body: <p>I hope you all are having a great day</p>
  
  <p>I'd like to add animation to that piece of code. I tried using animate() . But it didn't work, maybe it's because of the lack of my knowledge in javascript.</p>
  
  <p>Please tell me if it's possible with this code, or do I need to try something else? what do you suggest?</p>
  
  <p>Thank you very much in advance.</p>
  
  <p>Here is the HTML code:</p>
  
  <pre><code>&lt;div id="description_wrapper"&gt;
      Text content.&lt;br/&gt;
      See; More Text content.
  &lt;/div&gt;
  
  &lt;button class="learn_more" id="lm_more" href="#"&gt;Learn more&lt;/button&gt;
  </code></pre>
  
  <p>The CSS</p>
  
  <pre><code>#description_wrapper
  {
      margin: 0 auto;
      margin-top: 25px;
      height: 0;
      overflow: hidden;
  }
  </code></pre>
  
  <p>The jQuery</p>
  
  <pre><code>$('#lm_more').click(function(event){
      event.preventDefault();
      if($('#description_wrapper').css('height') &gt; '1px') {
          $('#description_wrapper').css({'height': '0px'});
          $('#lm_more').html('Learn More');
      }
      else
      {
          $('#description_wrapper').css({'height': 'auto'});
          $('#lm_more').html('Learn less');
      }
  });
  </code></pre>
  
  <p>View the code here   <a href="http://jsfiddle.net/Gbspx/11/" rel="noreferrer">http://jsfiddle.net/Gbspx/11/</a></p>