Why isn't my jQuery toggle working?
<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>
