如何制作部分隐藏的div？

Question

I want to make a half shown div in a page, like a footer. When I click it I want it to slide up. The div will contain information on it.

I achieved this somehow, but my problem is that the div does not get really hidden it just changes the position.

You can find the demo here: http://jsfiddle.net/8ZFMJ/394/

var clicked=false;
$(".two").on('click', function(){
    if(clicked)
    {
        clicked=false;
        $(".two").css({"bottom": -430});
    }
    else
    {
        clicked=true;
        $(".two").css({"bottom": "-200px"});
    }
});

Answer 1

.two must be absolute positioned inside .container that must be relative positioned. Then you just change the bottom with a negative value and that will hide the footer.

CSS:

html, body { height: 100%; }
.container {
    position: relative;
    height: 100%;
    overflow: hidden;
}
.two {
    position: absolute;
    background-color: yellow;
    width: 100%;
    height:250px;
    bottom: -200px;
    transition: bottom 1s;
}

jQuery:

var clicked=false;
$(".two").on('click', function(){
    if(clicked)
    {
        clicked=false;
        $(".two").css({"bottom": "-200px"});
    }
    else
    {
        clicked=true;
        $(".two").css({"bottom": 0});
    }
});

http://jsfiddle.net/8ZFMJ/398/

Answer 2

I had a similar problem a while ago, in fact I think it was my first stackoverflow question. Unfortunately it got poorly received.

Anyway, the problem is currently that you are just changing the position of the div - that's what .bottom does. I think what you want to do is change the height, see this JSFiddle in which I managed to switch the div between states (no animation yet).

It makes simple use of css's overflow-y: hidden; to hide the div's contents when it is small, and all the JS does is toggle between heights:

if(clicked)
{
    $(".two").css("height", 10);
}
else
{
    $(".two").css("height", 250);
}
clicked = !clicked;

clicked = !clicked just flips the boolean state of the variable.

Now, to add the animation, we can use jQuery's .animate and produce this beautiful Fiddle

Basically, all we had to do in between is use animate instead of css. Simple, really.

TL;DR
final JSFiddle