title: Jquery inner UL FadeIn / FadeOut
body: <p>I'm trying to accomplish a simple thing.
  I have a 2 levels menu with nested ULs.
  The inner ULs are set as display:none, so only the main categories are shown.
  I would like to preventDefault onclick behaviour on the main categories and fade in their respective inner ULs aside.</p>
  
  <p>My html is this:</p>
  
  <pre><code>&lt;nav id="type-navigation"&gt;
      &lt;ul id="nav_categories" class="subs"&gt;
          &lt;li&gt;&lt;a href="#"&gt;Category 1&lt;/a&gt;
                  &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Link1&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Link2&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Link3&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Category 2&lt;/a&gt;
                  &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Link1&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Link2&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Link3&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
          &lt;/li&gt;
  &lt;/ul&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>I would like to do this using Jquery. When I click on the first category, its children UL should be shown aside with FadeIn. When I click on another category, the previously shown UL should FadeOut and the other categories UL should FadeIn.</p>
  
  <p>This is my Jquery and it's not working as expected:</p>
  
  <pre><code>$("ul li a").toggle(function() { 
                    $(this).children("ul").fadeIn("slow");
                    },
                     function() { 
                   $(this).children("ul").fadeOut("slow"); 
                  });
  </code></pre>