Accordion Menu slideToggle

Hi all

I have a simple accordion menu using div's for the buttons and containers.

www.ttmt.org.uk/openClose2.html

The sections slide down when the btn is clicked and any open sections are closed.

Code:
$('div.NavBtn').click(function() {
	$('div.sideNavContent').slideUp('normal');
	$(this).next().slideDown('normal');
});

$("div.NavContent").hide();
In this example the section opens when the btn is clicked and then closes if the btn is clicked again

www.ttmt.org.uk/openClose.html

Code:
$('div.NavBtn').click(function() {
	$(this).next().slideToggle('normal');
});

$("div.NavContent").hide();
I want to combine both the actions into the same code.

If a btn is clicked it will open and close that section.

If a btn is clicked and another section is open the open sections will be closed.

I can't see how to do both, can anyone help

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <meta name="robots" content="noindex, nofollow" />
  
	<title> </title>
	
	<!--CSS-->	
	<style type="text/css" media="screen">
	 *{margin:0;padding:0;}
	 
   body{background:#ddd;}
   
   #sideNav {background:white;overflow:auto;width:330px;border: 1px solid #ccc;margin:50px;}
   
   #sideNav .NavBtn{	
   	border-top:1px dashed #999;
   	color:#444;
   	cursor: pointer;
   	float: left;
   	text-decoration:none;
   	padding:14px 10px;
   	width: 310px;
   }
   #sideNav .NavContent{
    float: left;
   	background:#f4f4f4;
    width:330px;
   }
   #sideNav .NavContent p{
     padding:10px;
   }
   
	</style>
	
</head>

<body>

        
  <div id="sideNav">
    
    <div class="NavBtn">
  	  <h2>One </h2>
  	</div>
  	<div class="NavContent">
  	  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. *** sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. </p>
  	</div>
	
	  <div class="NavBtn">
  	  <h2>Two </h2>
  	</div>
  	<div class="NavContent">
  	  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. *** sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. </p>
  	</div>
    
    <div class="NavBtn">
  	  <h2>Three </h2>
  	</div>
  	<div class="NavContent">
  	  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. *** sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. </p>
  	</div>    
	
  </div><!--sideNav-->
        	
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
  <script src="jquery-1.7.1.min.js" type="text/javascript"></script>
  <script type="text/javascript">
  
    $('div.NavBtn').click(function() {
    	$('div.NavContent').slideUp('normal');
    	$(this).next().slideDown('normal');
    	//$(this).next().slideToggle('normal');
    });

    $("div.NavContent").hide();
    
  </script>
</body>
</html>