You can use css and jquery, I'll give an example here, in this example when clicking the div it appears on the screen.
First you "hide" it using css:
.janela{
width: 100px;
height: 100px;
border:1px solid #f00;
margin-top: -90px;
position:fixed;
}
And then you show using jquery:
$(function(){
$( ".janela" ).click(function() {
$(this).animate({
marginTop: 0
}, 1500 );
});
});
Result: link
Update:
In this way the screen appears when clicking and hides when clicking again, it checks the margin-top and performs the action:
$(function(){
alert($(".janela").css('margin-top'));
$(".janela").click(function() {
var pos = parseInt($(this).css('margin-top').replace("px", ""));
if(pos == 0){
$(this).animate({
marginTop: -90
}, 1500 );
}else{
$(this).animate({
marginTop: 0
}, 1500 );
}
});
});
Result: link