jQuery toggle menu hide/show (close other menus when new menu opens) -

thanks nick craver i've got nice toggle menu going, i've come problem if users keep clicking new menus page keep growing dont want, idea is:

as 1 menu opens, open menus close.

the full source @ http://the-dot.co.uk/new/

here 2 snippets of code i'm using.

<script type="text/javascript"> $(document).ready(function() { $("ul li a").click(function() { $(this).parent().next().toggle("fast"); }); }); </script> 

and html structure is

 <ul class="navigation">     <li><a name="us" title="us">us</a></li>     <li id="us">about thedot</li>     <li><a name="portfolio" title="portfolio">portfolio</a></li>     <li></li>     <li><a name="contact" title="contact">contact</a></li>     <li id="contact">contact deets     </li>     <li><a name="twitter" title="twitter">twitter</a></li>     <li id="twit">some twitter shit</li>     <li><a href="#">blog</a></li>   </ul> 

thanks.

you can this:

$(function() {   $("ul li a").click(function() {        $(this).parent().next().toggle("fast").siblings("[id]").hide("fast");   }); }); 

you can test out here, toggle sibling <li> still, looks @ its .siblings() have id attribute , .hide() them if show.

---

if markup isn't locked in, simplify further this:

<ul class="navigation">     <li class="toggle">us</li>     <li class="content">about thedot</li>     <li class="toggle">portfolio</li>     <li class="content"></li>     <li class="toggle">contact</li>     <li class="content">contact deets</li>     <li class="toggle">twitter</li>     <li class="content">some twitter shit</li>     <li><a href="#">blog</a></li> </ul> 

and script this:

$(function() {   $("li.content").hide();   $("ul.navigation").delegate("li.toggle", "click", function() {        $(this).next().toggle("fast").siblings(".content").hide("fast");   }); }); 

it's matter of preference, find approach bit cleaner , more style-able, check out result here.