jQuery - slide down instead of slide up

Question

How to make the same as jsFiddle, but the difference is the green box should slide down to disappear (and slide up to appear when you click the click here link in the example one more time).

The two strings

/*position:absolute;*/
/*bottom:0px;*/

which are commented in the css part of jsFiddle doesn't work well if uncomment because it really starts to slide down, but the browser scroll bar disappers - not good.

Answer 1

Edited:

Add a <div> with an id sliderWrapper and give it 100% width as given below.

<div width="100%" id="sliderWrapper">        
    <div id="slider" style="border:1px solid red;">
        <h1>1</h1><h1>2</h1><h1>3</h1><h1>4</h1><h1>F</h1>

        <h1>1</h1><h1>2</h1><h1>3</h1><h1>4</h1><h1>E</h1>

        <h1>1</h1><h1>2</h1><h1>3</h1><h1>4</h1><h1>D</h1>

        <h1>1</h1><h1>2</h1><h1>3</h1><h1>4</h1><h1>C</h1>

        <h1>1</h1><h1>2</h1><h1>3</h1><h1>4</h1><h1>B</h1>

        <h1>A</h1><h1>A</h1><h1>A</h1><h1>A</h1><h1>A</h1>

         <h1>6</h1><h1>7</h1><h1>8</h1><h1>9</h1><h1>10</h1>
    </div>
</div>

Keep following css rules for #slider

  #slider {
      background : green;             
      width:100px;
      margin:20px auto 0 auto;
   }

Replace following line with $('#slider').slideToggle(500)

 if(hid) { $('#sliderWrapper').show("slide", { direction:"down" }, 500);} 
 else { $('#sliderWrapper').hide("slide", { direction:"down" }, 500); }

SEE DEMO

Answer 2

Edited your jsFiddle! Used jquery.slideToggle(); and some Css to get the right slide direction!

jsFiddle