jQuery: I need a custom hide() for toggling menu
<p>I have a simple menu/submenu with jquery click() function and toggle().
My problem is, toggle() is working fine, but when for e.g. #submenu1 is open, and I click on "Menu 2", #submenu1 remains visible of course, and both submenus overlap.
So I need a hide() for the submenus, but I don't get it work! I tried not(), siblings() with no success. Any help is appreciated! Thanks in advance.</p>

<p>jQuery:</p>

<pre><code>$('#menu li').click(function() {
$('div', this).stop(true, true).animate({ 'height': 'toggle' }, 300);
 });
</code></pre>

<p>HTML:</p>

<pre><code>&lt;ul id="menu"&gt;
   &lt;li&gt;&lt;a href="#"&gt;Menu 1&lt;/a&gt;
       &lt;div id="submenu1"&gt;
           &lt;ul&gt;
              &lt;li&gt;Submenu 1&lt;/li&gt;
           &lt;/ul&gt;
       &lt;/div&gt;
   &lt;/li&gt;
   &lt;li&gt;&lt;a href="#"&gt;Menu 2&lt;/a&gt;
       &lt;div id="submenu2"&gt;
           &lt;ul&gt;
              &lt;li&gt;Submenu 2&lt;/li&gt;
           &lt;/ul&gt;
       &lt;/div&gt;
   &lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>CSS:</p>

<pre><code>#submenu1, #submenu2 {
z-index: 99;
position: absolute;
background: #6fb700;
display: none;
}
</code></pre>
