title: finding next sibling in a jquery accordian menu
body: <p>So, my problem is that I can't seem to find the next() sibling down to the following nested ul li. when set to hide. I can find it when it's not set to hide easily by:</p>
  
  <ul>
  <li><p>This works when I comment out the JS and nothing is hidden: 
  //$(".vertNavigation li ul a").hide();</p></li>
  <li><p>Add this to click function: 
  $(this).next().css("background", "yellow").slideToggle("normal");</p></li>
  </ul>
  
  <p>Goal is to do the reverse, click on BUTTON ONE and slideDown nested ul and so on. What is it that I'm missing here?</p>
  
  <p>HTML CODE:</p>
  
  <pre><code>&lt;/head&gt;
  
  &lt;body&gt;
  &lt;div class = "vertNavigation"&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href="#" id = "button One"&gt;BUTTON ONE&lt;/a&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#"&gt;sub menu 1&lt;/a&gt;
                  &lt;li&gt;&lt;a href="#"&gt;sub menu 2&lt;/a&gt;
                  &lt;li&gt;&lt;a href="#"&gt;sub menu 3&lt;/a&gt;
                  &lt;li&gt;&lt;a href="#"&gt;sub menu 4&lt;/a&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#" id = "button Two"&gt;BUTTON TWO&lt;/a&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#"&gt;sub menu 1&lt;/a&gt;
                  &lt;li&gt;&lt;a href="#"&gt;sub menu 2&lt;/a&gt;
                  &lt;li&gt;&lt;a href="#"&gt;sub menu 3&lt;/a&gt;
                  &lt;li&gt;&lt;a href="#"&gt;sub menu 4&lt;/a&gt;
              &lt;/ul&gt;
          &lt;/li&gt;    
          &lt;li&gt;&lt;a href="#" id = "button Two"&gt;BUTTON THREE&lt;/a&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#"&gt;sub menu 1&lt;/a&gt;
                  &lt;li&gt;&lt;a href="#"&gt;sub menu 2&lt;/a&gt;
                  &lt;li&gt;&lt;a href="#"&gt;sub menu 3&lt;/a&gt;
                  &lt;li&gt;&lt;a href="#"&gt;sub menu 4&lt;/a&gt;
              &lt;/ul&gt;        
          &lt;/li&gt;    
          &lt;li&gt;&lt;a href="#" id = "button Two"&gt;BUTTON FOUR&lt;/a&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#"&gt;sub menu 1&lt;/a&gt;
                  &lt;li&gt;&lt;a href="#"&gt;sub menu 2&lt;/a&gt;
                  &lt;li&gt;&lt;a href="#"&gt;sub menu 3&lt;/a&gt;
                  &lt;li&gt;&lt;a href="#"&gt;sub menu 4&lt;/a&gt;
              &lt;/ul&gt;        
          &lt;/li&gt;    
      &lt;/ul&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS CODE:</p>
  
  <pre><code>.vertNavigation ul {
      list-style-type: none;
      padding-left: 0;
      margin-lef: 0;
  }
  
  .vertNavigation li {
      display: inline;
  }
  
  .vertNavigation a { /*main menu*/
      display: block;
      width: 100px;
      text-decoration: none;
      margin: 2px 0px 2px 0px;
      padding: 6px 15px 3px 15px;
      background-color: #EAEAEA;
      color: #333;
  
      font-size: .8em;
  }
  
  .vertNavigation li ul a {  /*sub menu*/
      text-decoration: none;
      border-bottom: solid 1px #333;
      border-length: 50px;
      margin: 2px 0px 2px 0px;
      background-color: #FFF;
      color: #333;
  }
  </code></pre>
  
  <p>JS CODE:</p>
  
  <pre><code>google.load("jquery", "1.6.2");
  
  google.setOnLoadCallback(function(){
  
      $(".vertNavigation li ul a").hide();
      $(".vertNavigation ul li a").click(function()
      {
          //$(this).next().slideToggle("normal");
          $(this).next().slideDown("normal");
  
          return false;   
      });
  
  });
  </code></pre>