jQuery：如何向下滑动一个绝对div以及另一个向下滑动的div？

Question

I have a text container that is absolutely positioned on the bottom of the page and above it, there is a Show/Hide button (which is also absolutely positioned).

I need to slide the Show/Hide button up and down along with the text container when it slide toggles. When the text container slides down, the button must follow it and remain visible at the bottom of the page. When the text container slides up, the button must slide up with it. I can't seem to get this to work.

HTML:

<div class="wrapper">
  <div class="button">
     <span>Hide</span><span style="display:none;">Show</span></div>
  <div class="container">Lorem ipsum dolor sit amet....</div>
</div>

jQuery:

$(".button").click(function () {
  $(this).find("span").toggle();
  $(".container").slideToggle("slow");
});

Here is the fiddle: http://jsfiddle.net/UDe8r/1/

Answer 1

Check here DEMO http://jsfiddle.net/yeyene/fpPJz/3/

JQUERY

$(document).ready(function(){
    $('.wrapper a').on('click',function(){
        if($(this).text() == 'Show')
            $(this).text('Hide');
        else
            $(this).text('Show');         
        $('.wrapper .content').slideToggle('slow');
    });
});

CSS

.wrapper {
    height: 400px;    
    position: relative;
}
.wrapper #button{
    cursor:pointer;
    position: relative;
    left:0;
    top:0;
    padding:0;
}
.wrapper #button a{
    padding:0 5px;
    text-align:right;
    background:green;
    cursor:pointer;
}
.container{    
    position: absolute;
    bottom:0;
}
.content{
    display:none;
    padding: 10px;
    background-color: #bbb;
}