Você pode utilizar css e jquery, vou da um exemplo aqui, neste exemplo ao clicar na div ela aparece na tela.
Primeiro você "esconde" ela utilizando o css:
.janela{
width: 100px;
height: 100px;
border:1px solid #f00;
margin-top: -90px;
position:fixed;
}
E então você mostra utilizando jquery:
$(function(){
$( ".janela" ).click(function() {
$(this).animate({
marginTop: 0
}, 1500 );
});
});
Resultado: https://jsfiddle.net/9stsct8r/
Update:
Desta forma a tela aparece ao clicar e esconde ao clicar novamente, ele verifica a margin-top e realiza a ação:
$(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 );
}
});
});
Resultado: https://jsfiddle.net/9stsct8r/1/