jQuery - simple animate height from top to bottom

Question

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.

Here's my code now: http://jsfiddle.net/FCCGF/1/

What I want here is:

• when page load, show only Test1.

• 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)

• 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.

Any help please?

Answer 1

When animating you can update the top and marginTop to achieve a sliding down effect:

$(document).ready(function() {
    var totalSidebarHeight = $(".sidebar").height();
    var resultHidden = totalSidebarHeight - 20;

    $(".topResultsArea").height( resultHidden );

    $(".showMore").toggle(function(){
        $(".topResultsArea").animate({height:20, top:$(".sidebar").height(), marginTop:0},200);

      },function(){
          $(".topResultsArea").animate({height:resultHidden, top:0, marginTop:40},200);
      });

});​

Updated fiddle: http://jsfiddle.net/johnkoer/FCCGF/18/