gistfile1.js

(function ($) {

    $.fn.wizard = function (settings) {
        var wizard = $(this);

        // Find and hide all steps
        var steps = wizard.find(".wizard-step");
        steps.hide();
        // Show first step
        steps.first().show();

        //Build up progress indicator
        var indicator = $("<ul />", { "class": "wizard-indicator" });
        $.each(steps, function (stepNumber) {
            var step = $(this);
            // Find step title
            var title = step.find(settings.stepTitle).text();
            title = $("<span />", { "class": "step-title", text: (stepNumber + 1) + ". " + title });

            // Find description
            var description = step.find(settings.stepDescription).text();
            description = $("<span />", { "class": "step-description", text: description });

            var li = $("<li />", { html: title });
            description.appendTo(li);
            // When clicking a step title
            li.click(function () {
                steps.hide(); // Hide all steps
                indicator.find("li").removeClass("active-step"); // Remove active class from all lis

                steps.eq(stepNumber).show(); // Show clicked step
                li.addClass("active-step"); // Add active class

                // If last step, highlight very last step ;)
                if (stepNumber == 3) {
                    indicator.find("li").last().addClass("active-step");
                } else {
                    indicator.find("li").last().removeClass("active-step");
                }
            });

            li.appendTo(indicator);
        });

        // Bind next step buttons
        $(".wizard-next-step").live("click", function (e) {
            var button = $(this);
            var currentStep = button.parents(".wizard-step");
            var currentStepIdx = currentStep.data("step");
            var nextStepIdx = currentStepIdx + 1;
            var nextStep = $(".wizard-step-" + nextStepIdx);

            // Activate next step
            $(".wizard-indicator").find("li").eq(nextStepIdx - 1).trigger("click");
        });

        // Activate first li initially
        indicator.find("li").eq(0).addClass("active-step");

        // Add indicator to wizard
        wizard.prepend(indicator);
        wizard.find("form").addClass("wizard-form");
    };

})(jQuery);