Bootstrap Step by Step Registration

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<script...

SCSS

#rego-form li {
    list-style: none;
    display: none;
}


$points        : 4;
$demo_w        : 90%;
$track_h       : 4px;
$track_h05     : $track_h / 2;
$gutter        : 100% / ($points - 1);
$duration      : 1s;

$_r    : 24px;
$_r05  : $_r / 2;
$_r025 : $_r05 / 2;
$_b    : $_r / 6;
$_mt   : ($track_h - $_r) * 0.5 - $track_h;

$tint-track      : #ddd;
$tint-progress   : #8B76C9;
$tint-complete   : #777;
$tint-incomplete : lighten($tint-complete, 20%);

*, *:before, *:after {
  @include box-sizing(border-box);
}

html, body {
  height: 200px;
}

body {
  font-size: 14px;
  text-align: center;
}

.inliner {
  height: 100%;
}

.inliner,
.inliner + .inlined {
  display        : inline-block;
  vertical-align : middle;
}

.inlined {
  width: $demo_w;
}

%demo {
  margin  : 20px auto;
}

.progress-meter {
  @extend %demo;
  
  counter-reset : point;
  
  %check {
    @include transition;
    @include border-radius($_r);
    @include box-shadow(0 0 0 2px white);
    
    content          : "\2713";
    display          : block;
    width            : $_r;
    margin           : 0 auto $_r05;
    border           : $_b solid $tint-incomplete;
    text-align       : center;
    background-color : white;
    color            : white;
  }
  
  .track {
    position   : relative;
    height     : $track_h;
    background : $tint-track;
  }
  
  .progress {
    @include transition(width 1s);
    
    display    : block;
    position   : absolute;
    left       : 0;
    top        : 0;
    width      : 0;
    height     : $track_h;
    background : $tint-progress;
  }
  
  .progress-points {  
    position   : relative;
    margin     : $_mt 0 0;
    padding    : 0;
    list-style : none;
    
    @for $i from 1 through $points {
      [data-point='#{$i}'] {
        left: ($i - 1) * $gutter;
      }    
    }
  }
  
  .progress-point {
    $_w : 100px;
    $_ml: $_w / -2;
    
    @include transition(color $duration);
    
    position    : absolute;
    display     :...

JavaScript

//hide loading image

    //show first form
    $('#rego-form li:first').show();

$('.next').on('click', 'li', function()
              {
                  //validate form
                
                  //proceed
                  var formIndex = $(this).closest('li').data('form');
                activate(formIndex+1);
                
              });

$('.back').on('click', 'li', function()
              {
                  //back step
                  var formIndex = $(this).closest('li').data('form');
                activate(formIndex-1);
                
              });

//form navigation
var $point_arr, $points, $progress, $trigger, activate, active, max, tracker, val;

$trigger = $('.trigger').first();

$points = $('.progress-points').first();

$point_arr = $('[data-point]');

$progress = $('.progress').first();

val = parseInt($points.data('current')) - 1;

max = $point_arr.length - 1;

tracker = active = 0;


activateCheck = function(index)
{
    //if last step dont allow backtrack
    //if forwards step
    if ((active !== max) && (active < index))
    {     
      //validate current form
      
      //validate forward steps in between
      //if fails validation, show form and trigger         validation errors
      
       //update index
      
    }
  
    return index;
}

activate = function(index) {
  if (index !== active) {
    
    var index = activateCheck(index);
    
    active = index;
    $point_arr.removeClass('completed active');
    $point_arr.slice(0, index).addClass('completed');
    $point_arr.eq(active).addClass('active');
    
    //show relevant form
    $('#rego-form li').hide();
    $('#rego-form li[data-form='+(index+1)+']').fadeIn();
    
    //if last step mark as ticked (green up?)
    if (active == max)
    {
      setTimeout(function()
                 {
       $point_arr.eq(active).addClass('completed active');
                 }, 500);

    }
    
    return $progress.css('width', (index / max * 100) + "%");
 ...