Question

The source code is here: JSfiddle

$(document).ready(function () {
$("#slide-link").click(function ()
   {
     $("#slider").hide("slide", { direction:"down" }, 1000);
   });
});

The problem is:
How to make “Click here” link to fall down with that green block and stayed on the very bottom (green block disappeares, “click here” link stays on the bottom)?
Once “Click here” pressed the second time (on the very bottom), everything goes up (the second click on the link eliminates the first click). As result, there are no changes on the page after two clicks.

Answer 1

First of all; your problem start when height value became to decrease, you should change your css structure. Second you need to use an external class to understand that object is active or not.

Here is jsFiddle example.

jQuery:

$("#slide-link").click(function (){
   if (!$(this).hasClass('active')) {//if clicked object has not got class active
      $("#slider").stop().animate({'bottom':'-401px'}, 1000);
      $(this).addClass('active');    
   }else{
      $("#slider").stop().animate({'bottom':'0px'}, 1000);//added stop to prevent
      $(this).removeClass('active');               //create an animate conflict
   }
});​

css:

#global-container {
 background-image    : url(http://www.google.com/logos/2012/javelin-2012-hp.jpg);
 height     : 400px;
 overflow:hidden;
}

Edit:
If you want to slide down click text too, inspect this jsFiddle example.