title: Why isn't my jQuery toggle working?
body: <p>I was wondering if someone could work this one out as I've been trying for 40 mins now and this shouldn't be so difficult.</p>
  
  <p>I have some nested divs like so:</p>
  
  <pre><code>&lt;div&gt;
  &lt;div&gt;
  Some info - &lt;a href='#' class='slick-toggle'&gt;[more info]&lt;/a&gt;
      &lt;div class='slickbox'&gt;
          &lt;div&gt;
          More Content...
              &lt;a href='#' class='slick-toggle2'&gt;see full XML reply&lt;/a&gt;&lt;br /&gt;
              &lt;div class='slickbox2'&gt;
                      &lt;div class='xmlOutput'&gt;
                         more content from XML source
                      &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>Now what I want to happen is when the link with the class "slick-toggle" is clicked the Div with the class "slickbox" is either hidden or show. Within this Div I have other link with the class "slick-toggle2" when this is clicked I want the div with the class "slickbox2" to be hidden or shown (when the page is loaded both these divs are hidden). So you can only toggle "slick-toggle2" if "slick-toggle" is being show. This should be easy, however the toggle only works for the first DIV. Can anyone see what's wrong with my jQuery</p>
  
  <pre><code>  $(document).ready(function() {
  
          $('.slickbox').hide();
          $('.slickbox2').hide();
  
          $('a.slick-toggle2').click(function() {
  
               $(this).next("div.slickbox2").toggle(400);
              return false;
          });
  
          $('a.slick-toggle').click(function() {
  
              $(this).next("div.slickbox").toggle(400);
              return false;
          });
  
      });
  </code></pre>
  
  <p>can anyone see where I'm going wrong? I think I'm going mad?</p>
  
  <p>PLEASE NOTE THAT I've Taken the A from the hyperlink out of the code as it was getting blocked?</p>