title: Navigate to any step in a Bootstrap step-wizard
body: <p>Here is my JSFiddle : <a href="https://jsfiddle.net/inchrvndr/8uwn0ph0/" rel="nofollow noreferrer">DEMO</a></p>
  
  <p>On click of "Save &amp; Continue", the step navigates to the next step of the wizard.</p>
  
  <p>How do I navigate to any step on click of a specific step? (instead of the step-by-step sequence that already exists)</p>
  
  <pre><code>  $('.f1 .btn-next').on('click', function() {
      var parent_fieldset = $(this).parents('fieldset');
      var next_step = true;
      // navigation steps / progress steps
      var current_active_step = $(this).parents('.f1').find('.f1-step.active');
      var progress_line = $(this).parents('.f1').find('.f1-progress-line');
  
      // fields validation
      parent_fieldset.find('input[type="text"], input[type="password"], textarea').each(function() {
          if( $(this).val() == "" ) {
              $(this).addClass('input-error');
              next_step = true;
          }
          else {
              $(this).removeClass('input-error');
          }
      });
  </code></pre>