JQuery toggle hide / show menu (close other menus when opening a new menu)

Question

thanks to Nick Craver I have a good menu for switching, but I had a problem: if users clicking new menus, the page will continue to grow, which I don’t want, so the idea is this:

when one menu opens, all currently open menus close.

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

Here are two pieces of code that I use.

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

Structure

and html

 <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>

thank.

Answer 1

You can do something like this:

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

, , sibling <li>, .siblings(), ID .hide(), .

---

, :

<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>

script :

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

, , .