Question

Ive made a fiddle of my problem here.

http://jsfiddle.net/E9cUS/1/

JavaScript:

$('.top').click(function () {
    var thisPage = $(this).closest('.yesNoItem');
    $('.yesNoTick').stop().animate({"opacity" : 1},400, function () {
        thisPage.find('.no .top').stop().animate({"opacity" : 0},400, function () {
            $(this).css("display", "none");
        });
    });
});

$('.yesNoNext').click(function () {
    $(this).closest('.yesNoItem').stop().animate({"opacity" : 0},400, function () {
        //This isnt working? Please advise?
        $(this).next('.yesNoItem').stop().animate({"opacity" : 1},400);
    });
});

HTML:

<div id="stage">
    <div class="yesNoOuter">

        <div class="yesNoItem" style="opacity:1;">
            <div class="yesNoContainer yes">
                <div class="top">
                    <div class="yesNoTick"></div>
                </div>
                <div class="bottom">
                </div>

            </div>
            <div class="yesNoContainer no">
                <div class="top">
                    <div class="yesNoTick"></div>
                </div>
                <div class="bottom">
                    <p>Text 1</p>
                    <div class="yesNoNext">More</span>
                </div>
            </div>
        </div>

        <div class="yesNoItem">
            <div class="yesNoContainer yes">
                <div class="top">
                    <div class="yesNoTick"></div>
                </div>
                <div class="bottom">
                </div>
            </div>
            <div class="yesNoContainer no">
                <div class="top">
                    <div class="yesNoTick"></div>
                </div>
                <div class="bottom">
                    <p>Text 2</p>
                    <div class="yesNoNext">More</span>
                </div>
            </div>
        </div>
    </div>
</div>

​

I’ve also put the line of code thats not working.

Bascially it is hiding the element that I want, but not fading the next one in…

Can any one advise based upon my code? Many thanks!

Answer 1

I think your HTML got messed up. The second .yesNoItem element is not a sibling but a child of the first .yesNoItem element (right click -> inspect element).

Probably because of <div class="yesNoNext">More</span> (opening div, closing span). The browser will attempt to correct this automatically and just ignore the closing span tag (at least this seems to be the case if you inspect the DOM).

If you correct your HTML it should work (at least it should select the right element).

If they are actually supposed to be nested, then .next() is the wrong method anyways.