javascript - Changing from hover to click? -

i've implemented small box on website @ bottom of page expand when mouse hovers on it... code , works great.

css

#box{     position:absolute;     width:300px;     height:20px;     left: 33%;     right: 33%;     min-width: 32%;     bottom:0;     background-color: #353535; } 

javascript

$('#box').hover(function() {     $(this).animate({         height: '220px'     }, 150); },function() {     $(this).animate({         height: '20px'     }, 500); }); 

but i'm curious how go changing open , close on click rather mouse hovering on it?

i've edited to...

$('#box').click(function() {     $(this).animate({         height: '220px'     }, 150); },function() {     $(this).animate({         height: '20px'     }, 500); }); 

and works open box. can't close again click.

so close yet far! :p

this should work

$('#box').toggle(function() {     $(this).animate({         height: '220px'     }, 150); },function() {     $(this).animate({         height: '20px'     }, 500); });