DIV Deslizante

Olá

Não conheço nada de JS, mas vivo usando suas funcionalidade na base do copia e cola. Estou precisando muito de uma funcionalidade que encontrei no JQuery. Segue a chamada abaixo:

$(document).ready(function() {
	$(".box-curtir-flutuante").hover(function(){
 $(this).stop().animate({left: "0"}, "slow");
 },
 function(){
 $(this).stop().animate({left: "-805"}, "slow");}, 500);
 });

Só que isso funciona assim: coloco o mouse em cima de uma abinha que fica no canto da tela e uma DIV (expansível) surge do canto da tela. Enquanto eu fico com o mouse em cima da DIV ela permanece na tela. Assim que tiro o mouse de cima ela desliza de volta, ficando só a abinha visível.

Muito bem! Mas como eu quero que funcione:

**1º - **Quero ter que CLICAR na abinha para expandir a DIV (e não apenas passar o mouse em cima (tentei trocar o ***hover ***por ***click***, mas não adiantou));

 

**2º - **Quero que a DIV permaneça visível na tela mesmo que o mouse não esteja em cima dela;

3º - Quero ter que CLICAR na abinha para fazer com que a DIV deslize de volta.

Como posso adaptar essa chamada para as funcionalidades que desejo?

Obrigado e abç a todos!!!