title: jQuery - simple animate height from top to bottom
body: <p>I have a sidebar on my site that shows some search results. I want only the first 20 results to show. Then there's a "Show more" button. When you click on that button I want to show the total list.</p>
  
  <p>Here's my code now: <a href="http://jsfiddle.net/FCCGF/1/" rel="nofollow">http://jsfiddle.net/FCCGF/1/</a></p>
  
  <p>What I want here is:</p>
  
  <ul>
  <li><p>when page load, show only Test1.</p></li>
  <li><p>when you click on "Show more" I want the animation to start from the top to the bottom (in order to show all the option of the list)</p></li>
  <li><p>I want the "show more" to be at the end of my list, and when the user click on it again, I want it to go back to where it was.</p></li>
  </ul>
  
  <p>Any help please?</p>