"Step Wizard (Working)"
Bootstrap 3.0.0 Snippet by mouse0270

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row form-group"> <div class="col-xs-12"> <ul class="nav nav-pills nav-justified thumbnail setup-panel"> <li class="active"><a href="#step-1"> <h4 class="list-group-item-heading">Step 1</h4> <p class="list-group-item-text">First step description</p> </a></li> <li class="disabled"><a href="#step-2"> <h4 class="list-group-item-heading">Step 2</h4> <p class="list-group-item-text">Second step description</p> </a></li> <li class="disabled"><a href="#step-3"> <h4 class="list-group-item-heading">Step 3</h4> <p class="list-group-item-text">Third step description</p> </a></li> </ul> </div> </div> <div class="row setup-content" id="step-1"> <div class="col-xs-12"> <div class="col-md-12 well text-center"> <h1> STEP 1</h1> <button id="activate-step-2" class="btn btn-primary btn-lg">Activate Step 2</button> </div> </div> </div> <div class="row setup-content" id="step-2"> <div class="col-xs-12"> <div class="col-md-12 well"> <h1 class="text-center"> STEP 2</h1> </div> </div> </div> <div class="row setup-content" id="step-3"> <div class="col-xs-12"> <div class="col-md-12 well"> <h1 class="text-center"> STEP 3</h1> </div> </div> </div> </div>
body{ margin-top:20px; }
$(document).ready(function() { var navListItems = $('ul.setup-panel li a'), allWells = $('.setup-content'); allWells.hide(); navListItems.click(function(e) { e.preventDefault(); var $target = $($(this).attr('href')), $item = $(this).closest('li'); if (!$item.hasClass('disabled')) { navListItems.closest('li').removeClass('active'); $item.addClass('active'); allWells.hide(); $target.show(); } }); $('ul.setup-panel li.active a').trigger('click'); // 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(); }) });

Related: See More


Questions / Comments:

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?

waqas () - 2 years ago - Reply 0


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();
})

waqas () - 2 years ago - Reply 0


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

Hayati Rohmatika Jufri () - 2 years ago - Reply 0


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

Alexandros () - 3 years ago - Reply 0


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();

})

louisstephens () - 4 years ago - Reply 0


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)

Casper Thomsen () - 3 years ago - Reply 0


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?

Guest () - 4 years ago - Reply 0


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.

Firoz () - 4 years ago - Reply 0


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() });

Sean Ryan () - 5 years ago - Reply 0


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!

mouse0270 () - 5 years ago - Reply 0


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!

Sean Ryan () - 5 years ago - Reply 0


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

Galicz Miklós () - 5 years ago - Reply 0


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.

mouse0270 () - 5 years ago - Reply 0


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

Galicz Miklós () - 5 years ago - Reply 0


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

mouse0270 () - 5 years ago - Reply 0


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

Guest () - 5 years ago - Reply 0


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

mouse0270 () - 5 years ago - Reply 0


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.

Emil dela Cruz () - 5 years ago - Reply 0


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');

mouse0270 () - 5 years ago - Reply 0


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

Emil dela Cruz () - 5 years ago - Reply 0


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...

mouse0270 () - 5 years ago - Reply 0


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

Emil dela Cruz () - 5 years ago - Reply 0


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.

mouse0270 () - 5 years ago - Reply 0


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!

Emil dela Cruz () - 5 years ago - Reply 0


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

Kornelius () - 5 years ago - Reply 0


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.

mouse0270 () - 5 years ago - Reply 0


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

mouse0270 () - 5 years ago - Reply 0