jQuery - Is there an easier way to write this?

Question

I am a new programmer so fogive me if this amateur... I am looking for some direction, or perhaps some ideas. I goal here is for me to learn, so any push in the right direction would be appreaciated.

ok.. I challenged myself to create a 'wizard' like control for a simple sign up form using jQuery. I can get through the steps quite nicely however I am looking at my code and I cant help but think; "there has to be a better, easier and proper way to do this". Here is what I have.

function toggleStep(){
        $("#nextButton").click(function(){
            if($("#nextButton").name = "step1"){
                $("#nextButton").attr("name", "step2");

                $("#backButton").attr("name", "step1").css("display", "inline");

                $("#step1").hide();
                $("#step2").show("fade", 250);
            }
            $("#nextButton").click(function(){
                if($("#nextButton").name = "step2"){
                    $("#nextButton").attr("name", "step3");

                    $("#backButton").attr("name", "step2");

                    $("#step2").hide();
                    $("#step3").show("fade", 250);
                }
                    $("#nextButton").click(function(){
                        if($("#nextButton").name = "step3"){
                            $("#nextButton").attr("name", "step4");
                            $("#nextButton").css("display", "none");

                            $("#backButton").attr("name", "step3");

                            $("#step3").hide();
                            $("#step4").show("fade", 250);
                        }
                });
            });
        }); 
    }

Also, I seem to have messed myself up when creating a "back button" function. This code is simply not good enough. How would you approach this? Thanks!!!

Answer 1

i would just use jquery to toggle an class="activeStep" and do the rest (hiding, showing, fading) with css.

Answer 2

You'd probably want to look into jQuery's prev() and next() methods. Combined with a logic based on a class name for the steps (instead of DOM ids), these methods could very easily shorten and simplify your code.

A rough verbose example:

$('#nextButton').click(
    function() {
        var current_step = $('#steps_container').find('.step:visible');
        var next_step    = current_step.next();
        if (next_step.length) {
            current_step.hide();
            next_step.fadeIn(250);
        }
    }
);

$('#prevButton').click(
    function() {
        var current_step = $('#steps_container').find('.step:visible');
        var prev_step    = current_step.prev();
        if (prev_step.length) {
            current_step.hide();
            prev_step.fadeIn(250);
        }

    }
);

This should handle nicely any number of steps in the following markup:

<div id="steps_container">
    <div class="step">Step 1</div>
    <div class="step">Step 2</div>
    <div class="step">Step 3</div>
    <div class="step">Step 4</div>
    <div class="step">Step 5</div>
    <div class="step">Step 6</div>
    ...
</div>

---

As long as @stefanz is improving on my code, an even simpler and more generalized approach can be to bind the navigation buttons' handlers to a class as well, like so:

$('.steps_nav_buttons_bar .steps_nav_button').click(
    function() {
        var current_step = $('#steps_container').find('.step:visible'),
            new_step     = $(this).hasClass('next') ? current_step.next() : current_step.prev();

        if (new_step.length) {
            current_step.fadeOut('fast',function() { new_step.fadeIn('fast') })
        }
     }
);

The advantage of this is that it allows you to add more than one set of navigation buttons, for instance, in case you want navigation bars at the top and bottom:

<div class="steps_nav_buttons_bar top_bar">
    <div class="steps_nav_button prev">Prev</div>
    <div class="steps_nav_button next">Next</div>
</div>

<div id="steps_container">
    <div class="step">Step 1</div>
    <div class="step">Step 2</div>
    <div class="step">Step 3</div>
    <div class="step">Step 4</div>
    <div class="step">Step 5</div>
    <div class="step">Step 6</div>
    ...
</div>

<div class="steps_nav_buttons_bar bottom_bar">
    <div class="steps_nav_button prev">Prev</div>
    <div class="steps_nav_button next">Next</div>
</div>