Hi, I'm trying to design a navigation menu for my site, similar to the one you can see on www.o2.co.uk  (Explore, Shop, Support)

This is my code so far which works - sort of:

1. $(".linkblock").hide();
   $(".expandexplore").toggle(
     function () {
       $("#exploreblock").slideDown('slow');
     },
     function () {
       $(".linkblock").slideUp('fast')();
     }
   );
   
   $(".expandservices").toggle(
     function () {
       $("#servicesblock").slideDown('slow');
     },
     function () {
       $(".linkblock").slideUp('fast')();
     }
   );
   
   $(".expandabout").toggle(
     function () {
       $("#aboutblock").slideDown('slow');
     },
     function () {
       $(".linkblock").slideUp('fast')();
     }
   );
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   

And my HTML:

1.         <div id="nav">
               <ul>
                   <li class="linkcontainer">
                       <a class="main" href="/explore">Explore</a>
                       <a class="expand expandexplore" href="#"></a>
                   </li>
                   <li class="linkcontainer">
                       <a class="main" href="/explore">Services</a>
                       <a class="expand expandservices" href="#"></a>
                   </li>
                   <li class="linkcontainer">
                       <a class="main" href="/explore">About</a>
                       <a class="expand expandabout" href="#"></a>
                   </li>
               </ul>
           </div><!-- End Nav -->
   
   <div id="exploreblock" class="linkblock">
   <p>ExplorePellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi .... </p>
   </div>
   <div id="servicesblock" class="linkblock">
   <p>ServicesPellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi .... </p>
   </div>
   <div id="aboutblock" class="linkblock">
   <p>AboutPellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi .... </p>
   </div>
    
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   

I need to change the JQuery to close the other divs when one is opened, and also to collapse all if the link is toggled, at the moment, the toggle is persistent. if that makes sense.

Any help very much appreciated! :-)