On linear stepper : Jump into done steps

[aviveros]

Hi Kinark,

With actual settings is only posible jump into next/prev step and not jumping some steps. For example, if you are in step 3 (1&2 are done) and you want to go back to 1, you can't. You need to open next/prev step until arriving your previous done step, something annoying specially for long steppers.

If you think is interesting, please consider to update, I have modified mine updating one of your methods and adding some conditions :

        // updated method nextStep
        $.fn.nextStep = function(callback, activefb, e, nextIndex) {
           stepper = this;
           settings = $(stepper).data('settings');
           form = this.closest('form');
           active = this.find('.step.active');

           if (nextIndex) {
              next = nextIndex;
           }else {
              next = $(this.children('.step:visible')).index($(active))+2;
           }
           
           feedback = active.find('.next-step').length > 1 ? (e ? $(e.target).data("feedback") : undefined) : active.find('.next-step').data("feedback");
           if(form.isValid()) {
              if(feedback && activefb) {
                 if(settings.showFeedbackLoader) stepper.activateFeedback();
                 return window[feedback].call();
              }
              active.removeClass('wrong').addClass('done');
              this.openStep(next, callback);
              return this.trigger('nextstep');
           } else {
              return active.removeClass('done').addClass('wrong');
           }
        };



        // initialization of new features jump into done elements
        $('.stepper li .step-title').click(function (e) {
            var next_step = $( ".stepper li .step-title" ).index( this )+1;
            var last_step_done = $('.stepper li.done').index();

            if ($(this).parent().hasClass('done')){
                // case jump backward to done
                if (next_step < $('.stepper').getActiveStep() ) {
                   $('.stepper').openStep(next_step);
                }

                // case jump forward to done
                else {
                    e.preventDefault();
                    $('.stepper').nextStep(undefined, true, e, next_step);
                }

            } else {

                 // case jump forward to not done, but prev yes
                 if ($(this).parent().prev().hasClass('done')){                     
                    e.preventDefault();
                    $('.stepper').nextStep(undefined, true, e, next_step); 

                 // case jump forward to not done, and prev notdone
                 } else {
                    e.preventDefault();
                    $('.stepper').nextStep(undefined, true, e, last_step_done + 2);
                 }                   
            }

        });

[rubendinho]

+1

[bastianwegge]

@aviveros This would be most easy to implement, if you would fork the repository and just create a Pull-Request containing your changes. Probably the owner of the repository is busy right now and you could implement those changes and also take part as a contributor. 🚀

[RadouaneRoufid]

+1

[suthanth]

I have added the above code but it seems not working. Can you please tell what are the places to modify? Now I am using the classes stepper horizontal linear in my primary ul tag

[Kinark]

It's an old issue and it contains jQuery code (which is not used on the project anymore). However, the feature request is still valid, therefore I'm going to keep it open as with the feature request label.