JSFiddle - React, Tailwind, and code Playground

by Saranya Sadhasivam

HTML

<ul class="nav-step">
    <li class="active">Step 1</li>
    <li>Step 2</li>
    <li>Step 3</li>
  </ul>
  <div style="clear:both"></div>
  <input id="prev" class="invisible" type="button" value="Previous" />
  <div class="pg-wrapper">
    <div class="current">
      <label>Step 1</label>
      <input type="text" />
    </div>
    <div>
      <label>Step 2</label>
      <input type="text" />
    </div>
    <div>
      <label>Step 3</label>
      <input type="text" />
    </div>
  </div>
  <input id="next" type="button" value="Next" />

CSS

ul { 
  list-style-type: none;
}

.nav-step li {
  float: left;
  background-color: lightgrey;
  color: white;
  padding: 5px 20px;
  border: 1px solid grey;
  position: relative;
  margin: 10px;
}

.nav-step li:after {
  content: '';
  width: 100%;
  height: 2px;
  background: grey;
  position: absolute;
  left: -50%;
  top: 14px;
  z-index: -1
}

.nav-step li:first-child:after {
  content: none;
}

.nav-step .active {
  background-color: white;
  color: grey;
}

.pg-wrapper div {
  background-color: lightgrey;
  position: absolute;
}

.current {
  z-index:100;
}

.pg-wrapper {
  width: 220px;
  height:20px;
  display:inline-block;
}

#prev {
  display:inline-block;
}

#next {
  display: inline-block;
}

.visible {
  visibility:visible;   
}

.invisible {
  visibility:hidden;   
}

JavaScript

var current;
var navstep;
var index = 0;

$(function () {
   current = $('.pg-wrapper').find('.current');
  navstep=$('.nav-step').find('.active');
  $('.pg-wrapper div').not(current).hide();
}(jQuery));

 
$('#next').on('click', function() {
  if (current.next().length===0) return;
  current.next().addClass('current').show();
       
  current.removeClass('current').hide();
  
    navstep.next().addClass('active');
  navstep.removeClass('active');
  
 current = current.next();
  navstep = navstep.next();
  index = current.index();
  change_step_class(index)
});

$('#prev').on('click', function() {
  if (current.prev().length===0) return;
  current.prev().addClass('current').show();
  current.removeClass('current').hide();
  
  navstep.prev().addClass('active');
  navstep.removeClass('active');
  
  current = current.prev();
  navstep = navstep.prev();
  index = current.index();
  change_step_class(index)
});

function change_step(value)
{
    if (value === 0) {
        $('#prev').hide();
        $('#next').show();
    } else if (value === 1) {
        $('#prev').show();
        $('#next').show();
    } else {
       $('#next').hide();
       $('#prev').show();
    }
}

function change_step_class(value)
{
    if (index === 0) {
        $('#prev').addClass('invisible');
        $('#prev').removeClass('visible');
        $('#next').removeClass('invisible');
        $('#next').addClass('visible');
    } else if (index === 1) {
        $('#prev').addClass('visible');
        $('#prev').removeClass('invisible');
        $('#next').removeClass('invisible');
        $('#next').addClass('visible');
    } else {
       $('#next').addClass('invisible');
    }
}