Toggle multiple DIV on and off.

Hi,

I have 5 divs which get displayed depending on what  heading is hovered over.  I want this popup to remain open until another selection is made, the previously opened DIV should be closed when a new selection is made.  Only one div should be open at a time.  The following code shows/hides them okay, but they dont stay open.

<script type="text/javascript">
  $(document).ready(function(){
  
  var $curr = $("#start");
    
  $(".msg_body").hide();
    
    $(".msg_head").hover(
      function () {
	  
	  $curr = $curr.prev();
	  
 
        $(this).next("$curr").show();
 
 
      }, 
      function () {
     $(this).next("$curr").hide();
      }
    );
	
  });
  
  </script>
 
<div id="goal1">
<div id="msg_list">
<p class="msg_head"><img src="images/goal1.gif" alt="Goal 1 Benchmarking" name="goal1" width="285" height="49"></p>
  
 
<div class="msg_body">
<strong>Goal 1</strong>Text text</div>
  </div>  
</div>

Select allOpen in new window