title: jQuery Nested ul with li's parent child, show hide
body: <p>I'm trying to create a simple accordion menu where ul's nested in an li are hidden until the parent li is clicked which will first hide all other nested ul's if exposed and then expose the nested ul of that li.</p>
  
  <p>The only other catch is that I want to remove the href for the parent li.</p>
  
  <p>I've achieved most of this except my nested ul li's are inheriting the aforementioned actions even though I'm targeting the li's parent class. I know I'm missing something fundamental. Thanks in advance</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;ul&gt;
    &lt;li.expanded&gt;&lt;a href="foo"&gt;Lorum&lt;/a&gt;
      &lt;ul&gt;
        &lt;li.leaf&gt;&lt;a href="foo"&gt;Lorum&lt;/a&gt;&lt;/li&gt;
        &lt;li.leaf&gt;&lt;a href="foo"&gt;Lorum&lt;/a&gt;&lt;/li&gt;
        &lt;li.leaf&gt;&lt;a href="foo"&gt;Lorum&lt;/a&gt;&lt;/li&gt;
        &lt;li.leaf&gt;&lt;a href="foo"&gt;Lorum&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li.expanded&gt;&lt;a href="foo"&gt;Lorum&lt;/a&gt;
      &lt;ul&gt;
        &lt;li.leaf&gt;&lt;a href="foo"&gt;Lorum&lt;/a&gt;&lt;/li&gt;
        &lt;li.leaf&gt;&lt;a href="foo"&gt;Lorum&lt;/a&gt;&lt;/li&gt;
        &lt;li.leaf&gt;&lt;a href="foo"&gt;Lorum&lt;/a&gt;&lt;/li&gt;
        &lt;li.leaf&gt;&lt;a href="foo"&gt;Lorum&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li.expanded&gt;&lt;a href="foo"&gt;Lorum&lt;/a&gt;
      &lt;ul&gt;
        &lt;li.leaf&gt;&lt;a href="foo"&gt;Lorum&lt;/a&gt;&lt;/li&gt;
        &lt;li.leaf&gt;&lt;a href="foo"&gt;Lorum&lt;/a&gt;&lt;/li&gt;
        &lt;li.leaf&gt;&lt;a href="foo"&gt;Lorum&lt;/a&gt;&lt;/li&gt;
        &lt;li.leaf&gt;&lt;a href="foo"&gt;Lorum&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li.expanded&gt;&lt;a href="foo"&gt;Lorum&lt;/a&gt;
      &lt;ul&gt;
        &lt;li.leaf&gt;&lt;a href="foo"&gt;Lorum&lt;/a&gt;&lt;/li&gt;
        &lt;li.leaf&gt;&lt;a href="foo"&gt;Lorum&lt;/a&gt;&lt;/li&gt;
        &lt;li.leaf&gt;&lt;a href="foo"&gt;Lorum&lt;/a&gt;&lt;/li&gt;
        &lt;li.leaf&gt;&lt;a href="foo"&gt;Lorum&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>jQuery</p>
  
  <pre><code>$(document).ready(function() {
      $('ul ul').hide();
      $('ul li.expanded a').removeAttr("href");
      $('ul li').click(function(){
        $('ul ul').hide('slow');
        $(this).find('ul').toggle('slow');
  
  
  
      });
   });
  ;
  </code></pre>