Wysuwany panel "sidebar" w jquery a zamknięcie go

Witam zrobiłem wysuwany panel z dołu strony, po najechaniu myszką wysuwa się do góry po wyjście poza granice chowa się a jak zrobić by po kliknięciu w niego lub stworzenie X żeby znikał całkowicie? Da się coś takiego zrobić?

 

Tak wygląda kod

 

<meta content=“application/xhtml+xml; charset=utf-8” http-equiv=“Content-type” />

<title></title>

<script type=“text/javascript” src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<link href=“panel.css” rel=“stylesheet” type=“text/css” /><script type=“text/javascript”>

$(function(){

 

$("#panel").css(“bottom”,"-210px");

 

$("#panel").hover(function(){

 

$("#panel").animate({bottom: “0px”}, 500 );

$(this).addClass(“zamknij”); 

return false;

},

function(){

$("#panel").animate({bottom: “-210px”}, 500 );

$(this).removeClass(“zamknij”); 

return false;

 

});

});

Można rozwiązać to na wiele sposobów, na przykład taki prowizoryczny skrypt:

 

$("#panel").css(“bottom”,"-210px");

 

$(’#panel’).hover(function(){