title: How to collapse a submenu when another parent menu item is clicked with JQuery
body: <p>Just wanted to pick your brains a bit with this problem I'm having setting up a collapsible menu using jquery.  I'm currently using the slideToggle() function to animate the collasping with a menu click, it works for closing and opening submenus independently.  But I'm trying to figure out a way to have the submenus collapse when another opens.  Any suggestions/tips would be greatly appreciated.</p>
  
  <p><strong>Jquery</strong></p>
  
  <pre><code>&lt;script&gt;
       function initMenu() {
         $('#menu ul').hide(); 
         $('#menu li a').click(
  
         function() {
           $(this).next().slideToggle('normal')
  
         });
  
       }
       $(document).ready(function() {initMenu();});
      &lt;/script&gt;
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;ul id="menu"&gt;
  
       &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
       &lt;li&gt;&lt;a href="#"&gt;In the news&lt;/a&gt;
  
          &lt;ul&gt;
            &lt;li&gt;&lt;a href="#"&gt;Youtube&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Blog&lt;/a&gt;&lt;/li&gt;
  
          &lt;/ul&gt;
       &lt;/li&gt;
  
       &lt;li&gt;&lt;a href="#"&gt;Who's Who?&lt;/a&gt;
           &lt;ul&gt;
             &lt;li&gt;&lt;a href="#"&gt;Youtube&lt;/a&gt;&lt;/li&gt;
             &lt;li&gt;&lt;a href="#"&gt;Tackle Hunger Tackle  Hunger&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
       &lt;li&gt;&lt;a href="#"&gt;Services Offered&lt;/a&gt;&lt;/li&gt;
  
   &lt;/ul&gt;
  </code></pre>
  
  <p>Thanks,</p>
  
  <p>Andre</p>