Menu expand upwards with Click event instead of hover

Menu expand upwards with Click event instead of hover

Hi,

Im trying to mod a plugin ive found here where a div will expand from the baseline (or sort of) and in the way will also cover whatever contents is beneath it.

The thing is, i want the animation to be activated not with "hover" but with a "click" event. Original code is:

<script type="text/javascript">
 $(document).ready(function() { 
 $('.featureBox').hover(function() {
 $(this).animate({top: '0px', height:'540px'},{duration:'slow', queue:'no'});
 },
 function() {
 $(this).animate({top: '390px', height:'150px'},{duration:'slow', queue:'no'});
 });;
 });
 </script>









with this CSS:

#container1 {
    height: 200px;
    margin: 0;
    overflow: visible;
    width: 80px;
}


.featureBox1{
    color:#FFFFFF;
    width:70px;
    height:20px;
    position:relative;
    top: 180px;
    bottom: 0px;
    background-color:#333333;
   
}
.featureBox1:hover {
    top: 0px;
    bottom: 0px;
}


I have changed it to:
......
$('.featureBox').click(function()
......{
And also changed hover for click on the CSS part and it now opens the DIV with a click event, but then i need to find the way to make it collapse after some other event.
WIch event would that be? I would like it to collapse after you hit a new DIV that is going to expand. The point for this is opening a submenu from a menu item with a click, and then make this expanded div collapse when you hit a second menu item that is then now going to be expanded.


Here is a full test html if  feel like trying it out.