I have the drop down navigation working under two headings on the site: "projects" and "press".

When the user clicks on one the content is revealed underneath it. If the user clicks on a project link I would like the project navigation to remain open.

If the user then clicks on the press link I would like the project navigation to close and the press one to remain open until they click onto something else.

Here are the two sets of HTML where I am using it.

HTML Code:
  <a href="#" id="toggleButton" onmouseover="image1.src='http://andysalzer.com/images/menu_o_03.png';"
onmouseout="image1.src='http://andysalzer.com/images/menu_03.png';">
<img name="image1" src="http://andysalzer.com/images/menu_03.png" border=0></a><br />
<div id="toggleSection">
  <a href="/index.php?c=projects&s=yokodevereaux" onmouseover="image15.src='http://andysalzer.com/images/projects_o_10.png';"
onmouseout="image15.src='http://andysalzer.com/images/projects_10.png';">
<img name="image15" src="http://andysalzer.com/images/projects_10.png" border=0></a>

  <a href="/index.php?c=projects&s=witness" onmouseover="image14.src='http://andysalzer.com/images/projects_o_09.png';"
onmouseout="image14.src='http://andysalzer.com/images/projects_09.png';">
<img name="image14" src="http://andysalzer.com/images/projects_09.png" border=0></a><br />

  <a href="/index.php?c=projects&s=terminal5" onmouseover="image13.src='http://andysalzer.com/images/projects_o_08.png';"
onmouseout="image13.src='http://andysalzer.com/images/projects_08.png';">
<img name="image13" src="http://andysalzer.com/images/projects_08.png" border=0></a><br />

  <a href="/index.php?c=projects&s=patrickduffy" onmouseover="image12.src='http://andysalzer.com/images/projects_o_07.png';"
onmouseout="image12.src='http://andysalzer.com/images/projects_07.png';">
<img name="image12" src="http://andysalzer.com/images/projects_07.png" border=0></a><br />

  <a href="/index.php?c=projects&s=grandlife" onmouseover="image11.src='http://andysalzer.com/images/projects_o_06.png';"
onmouseout="image11.src='http://andysalzer.com/images/projects_06.png';">
<img name="image11" src="http://andysalzer.com/images/projects_06.png" border=0></a><br />

  <a href="/index.php?c=projects&s=gilt" onmouseover="image10.src='http://andysalzer.com/images/projects_o_05.png';"
onmouseout="image10.src='http://andysalzer.com/images/projects_05.png';">
<img name="image10" src="http://andysalzer.com/images/projects_05.png" border=0></a><br />

  <a href="/index.php?c=projects&s=gap" onmouseover="image9.src='http://andysalzer.com/images/projects_o_04.png';"
onmouseout="image9.src='http://andysalzer.com/images/projects_04.png';">
<img name="image9" src="http://andysalzer.com/images/projects_04.png" border=0></a><br />

  <a href="/index.php?c=projects&s=fearless" onmouseover="image8.src='http://andysalzer.com/images/projects_o_03.png';"
onmouseout="image8.src='http://andysalzer.com/images/projects_03.png';">
<img name="image8" src="http://andysalzer.com/images/projects_03.png" border=0></a><br />

  <a href="/index.php?c=projects&s=drmartens" onmouseover="image7.src='http://andysalzer.com/images/projects_o_02.png';"
onmouseout="image7.src='http://andysalzer.com/images/projects_02.png';">
<img name="image7" src="http://andysalzer.com/images/projects_02.png" border=0></a><br />

  <a href="/index.php?c=projects&s=cashmere" onmouseover="image6.src='http://andysalzer.com/images/projects_o_01.png';"
onmouseout="image6.src='http://andysalzer.com/images/projects_01.png';">
<img name="image6" src="http://andysalzer.com/images/projects_01.png" border=0></a><br />

</div>
HTML Code:
<a href="#" id="toggleButton2" onmouseover="image2.src='http://andysalzer.com/images/menu_o_04.png';"
onmouseout="image2.src='http://andysalzer.com/images/menu_04.png';">
<img name="image2" src="http://andysalzer.com/images/menu_04.png" border=0></a><br />

<div id="toggleSection2">

  <a href="/index.php?c=press&s=bello" onmouseover="image17.src='http://andysalzer.com/images/press_o_01.png';"
onmouseout="image17.src='http://andysalzer.com/images/press_01.png';">
<img name="image17" src="http://andysalzer.com/images/press_01.png" border=0></a>

  <a href="/index.php?c=press&s=dapperdan" onmouseover="image18.src='http://andysalzer.com/images/press_o_02.png';"
onmouseout="image18.src='http://andysalzer.com/images/press_02.png';">
<img name="image18" src="http://andysalzer.com/images/press_02.png" border=0></a><br />

</div>
Followed by the JS that is doing the action:

HTML Code:
$(function() {
        $('#gallery a').lightBox();
    });
    $(document).ready(function() {
          $('#toggleButton').click(function() {
               if ($('#toggleSection').is(":hidden"))
               {
                    $('#toggleSection').slideDown("slow");
               } else {
                    $('#toggleSection').slideUp("slow");
               }
               return false;
          });
    });
	$(document).ready(function() {
          $('#toggleButton2').click(function() {
               if ($('#toggleSection2').is(":hidden"))
               {
                    $('#toggleSection2').slideDown("slow");
               } else {
                    $('#toggleSection2').slideUp("slow");
               }
               return false;
          });
    });
    $(document).ready(function() {
          $("[id^=toggleButtonp]").click(function(Event) {	
	       $("[id^=toggleSectionp]").hide();
	       var id = this.className.match(/toggleSectionp(\d+)/)[1];
               if ($('#toggleSectionp'+id).is(":hidden"))
               {
                    $('#toggleSectionp'+id).slideDown("slow");
               } else {
                    $('#toggleSectionp'+id).slideUp("slow");
               }
               return false;
          });
    });
	   $(document).ready(function() {
          $("[id^=toggleButton2p]").click(function(Event) {	
	       $("[id^=toggleSection2p]").hide();
	       var id = this.className.match(/toggleSection2p(\d+)/)[1];
               if ($('#toggleSection2p'+id).is(":hidden"))
               {
                    $('#toggleSection2p'+id).slideDown("slow");
               } else {
                    $('#toggleSection2p'+id).slideUp("slow");
               }
               return false;
          });
    });
The only CSS for them is thus:

HTML Code:
#toggleSection {
	display: none;
}
#toggleSection2 {
	display: none;
}