Currently this piece of code causes a list to drop down when the user clicks on a certain category. Is there a way to close that category when another is clicked on.

For example: List One is clicked on and opens, then list two is clicked on, and list one closes automatically, leaving list two open by itself.

The code as it stands:

Code:
function toggle( targetId ){
  if (document.getElementById){
  		target = document.getElementById( targetId );
  			if (target.style.display == "none"){
  				target.style.display = "";
  			} else {
  				target.style.display = "none";
  			}
  	}
}
[It applies to the following piece of (x)html]

Code:
<div title="list one">
   <p><a href="/" onclick="toggle('mlistone');return false;">List One</a></p>
   <dl id="mlistone" style="display:none;">
      <dt style="display:none;">List One</dt>
         <dd><a href="alpha.htm">Alpha</a></dd>
         <dd><a href="beta.htm">Beta</a></dd>
         <dd><a href="gamma.htm">Gamma</a></dd>
   </dl>
</div>
	
<div title="list two">
   <p><a href="/" onclick="toggle('mlisttwo');return false;">List Two</a></p>
   <dl id="mlisttwo" style="display:none;">
      <dt style="display:none;">List Two</dt>
         <dd><a href="delta.htm">Delta</a></dd>
         <dd><a href="epsilon.htm">Epsilon</a></dd>
         <dd><a href="theta.htm">Theta</a></dd>
   </dl>
</div>
(Due to the nature of the script, it's easily possible to add any number of lists simply by changing the id of the onclick element, if it's possible, I'd like to retain this feature).

Thanks for any help.