it don't warn the required fields step by step . at the end the submit button don't work due to null required fields and not notice the user have any idea how to do this?

just add this under the 'demo only' comment in the code. for moving to the step 3

$('#activate-step-3').on('click', function(e) {
$('ul.setup-panel li:eq(2)').removeClass('disabled');
$('ul.setup-panel li a[href="#step-3"]').trigger('click');
$(this).remove();
})

hello, do you have any solution to disable step 1 after clicking the button active step 2? thanks :)

Hello.!! Can you adopted has opencart v2 from checkout page.??

Great snipp! Using the "demo", I added buttons to each section to go back and fourth to each section. However, the buttons on section 1/2 work just fine, but I can not figure out at all how to move to section 3. It "locked" and I have no idea around it. I did add the following:

// DEMO ONLY //

$('#activate-step-2').on('click', function(e) {

$('ul.setup-panel li:eq(1)').removeClass('disabled');

$('ul.setup-panel li a[href="#step-2"]').trigger('click');

// $(this).remove();

})

// DEMO ONLY //

$('#activate-step-1').on('click', function(e) {

$('ul.setup-panel li:eq(1)').removeClass('disabled');

$('ul.setup-panel li a[href="#step-1"]').trigger('click');

// $(this).remove();

})

$('#activate-step-3').on('click', function(e) {

$('ul.setup-panel li:eq(1)').removeClass('disabled');

$('ul.setup-panel li a[href="#step-3"]').trigger('click');

// $(this).remove();

})

Hi there, Louisstephens. You make it go to the step 3, by changing the "$('ul.setup-panel li:eq(1)')" to "$('ul.setup-panel li:eq(2)')". So your code is following:

"$('#activate-step-3').on('click', function(e) {

$('ul.setup-panel li:eq(1)').removeClass('disabled');

$('ul.setup-panel li a[href="#step-3"]').trigger('click');

// $(this).remove();"

This is how it needs to be, to go to the third section:

"$('#activate-step-3').on('click', function(e) {

$('ul.setup-panel li:eq(2)').removeClass('disabled');

$('ul.setup-panel li a[href="#step-3"]').trigger('click');

// $(this).remove();"

Sorry I did not response earlier, but I just registered here at Bootsnipp and Disqus. :)

- Best Regards bilbodog (Casper Thomsen)

hello ! I am having difficulty with the page. The "Activate step 2" button can't seems to be working. Do you have any solution to it?

This is very nice. But i am looking different one too. Would you tell me please from where i can get the Vertical Step wizard.

For those who are going to modify this to not use tabs, but real links, note that the 'disabled' class doesn't actually cause those links not to fire. You are going to need a bit of javascript to accomplish that, such as $('.disabled a').on('click', function(e) { e.preventDefault() });

In my project I use this in, I used ajax to load the information and did a small check. I didn't even think to consider someone using it to actually link to another page. Good catch!

I was about to comment that this was invalid code - you cannot put block level elements (h4, p) inside inline elements (a). However, in looking for that rule, I discovered that wrapping block level elements in an a tag is valid as of HTML5. So thanks for the code!

I've noticed that with each step, the well moves a few pixels down... any ideas?

WOW that is a close eye, I didnt even notice that. So the problem is that the class "setup-content" and the "id" have to be on the highest level, which in this case is the div with the class of "row" I have updated the HTML to fix this small error. Thanks for the heads up.

Great fix! Sorry I couldn't provide a solution also :(

No problem it was an easy fix once you pointed it out.

This is great! How do I make "focus" go automatically to 2nd or 3rd tab when I click on the activate buttons?

just add $('ul.setup-panel li.active a#step-2).trigger('click'); right after you removeClass('disabled');

Hi! Been trying to figure it out but to no avail...I'm really just a visual designer so I know very little of jQuery.

Is it like this?

$('ul.setup-panel li:eq(1)').removeClass('disabled');
$('ul.setup-panel li.active a#step-2').trigger('click');

Or like this?

$('ul.setup-panel li:eq(1)').$('ul.setup-panel li.active a#step-2').trigger('click');

I've tried both but I still couldn't make it auto focus. Thanks for the help, really appreciate it.

I updated the code to do this. sorry I screwed up when I posted the code in my comment. the code should have been $('ul.setup-panel li a[href="#step-2"]').trigger('click');

Ahh perfect! You just saved the night for me! :D Thank you very much for this wonderful snipp.

If you are using this, thought I would let you know, I have updated the code to make sure that the wizard doesnt get pushed down. find the reason here http://bootsnipp.com/mouse0...

Yes, I used this on my last project. What exactly was the update about because the above code is the same as the previous?

It was a minor change to the position of the setup-content class and ID to be on the div with the class row. It was pointed out to me that if it is on a lower div that with each step you content is pushed down by 1 pixel. It was purely a cosmetic bug, just wasn't sure if you would like to update you project was all.

Oh ok, I now noticed the update on the html. You basically revised the placement of the setup-content class and the ID. Ok, I updated my code to reflect the change though I hardly noticed the effect on the page actually. :) Hey thanks for letting me know!

Is it possible to jump directly into step to when you clic on the "Activate Step 2" button ?

Sorry the code should be $('ul.setup-panel li a[href="#step-2"]').trigger('click'); not what I posted below, I have updated the demo with this change as well.

just add $('ul.setup-panel li.active a#step-2).trigger('click'); right after you removeClass('disabled');