Question

I am creating a multiple-step form using jQuery and I am just in the very begining stages of writing this functionality. You can see a jsfiddle here: http://jsfiddle.net/ay3HV/1/

When you press the Next Button, the first part of the form fades out and the next fades in. BUT this only works on the first set of form elements (there are 3 total). My HTML is formatted like so:

<form>
<article>
form slide a elements
</article>
<article>
form slide b elements
</article>
<article>
form slide b elements
</article>
</form>

I am using Jquery to hide all articles that are NOT the first, and then hide that set on next, and reveal the second set like so:

$("article:not(:last)").append('<a class="next" href="#">Next</a>');
    $("article:nth-child(1n+2)").hide();


    $("a.next").on("click", function(){
        var thisPar = $("this").parent("article");

        if (thisPar = $("article:first")){
            thisPar.hide();
            thisPar.next().fadeIn();
        }

        else {
            thisPar.hide();
            thisPar.next().fadeIn();
        }

    });

For some reason this is not working after the first click on next. Any ideas? (see JSFiddle)

Answer 1

here’s a simple solution: http://jsfiddle.net/ay3HV/23/

This is the JS:

(function($){ 
    $(function() {
        $("article:not(:last)").append('<a class="next" href="#">Next</a>');
        $("article:nth-child(1n+2)").hide();
        $("a.next").on("click", function(e){
            e.preventDefault();
            // your if statement was redundant
            $(this).closest("article").hide().next().fadeIn();
        });
    });
})(jQuery);