Question

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.

I have some nested divs like so:

<div>
<div>
Some info - <a href='#' class='slick-toggle'>[more info]</a>
    <div class='slickbox'>
        <div>
        More Content...
            <a href='#' class='slick-toggle2'>see full XML reply</a><br />
            <div class='slickbox2'>
                    <div class='xmlOutput'>
                       more content from XML source
                    </div>
            </div>
        </div>
    </div>
</div>

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

  $(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;
        });

    });

can anyone see where I’m going wrong? I think I’m going mad?

PLEASE NOTE THAT I’ve Taken the A from the hyperlink out of the code as it was getting blocked?

Answer 1

It’s because the very next element is a <br />, so instead of this:

$(this).next("div.slickbox2").toggle(400);

You need this:

$(this).nextAll("div.slickbox2:first").toggle(400);

.next() gets the very next element only if it matches the selector. .nextAll() goes through all following siblings, and you’re getting the :first one that matches.