JSFiddle - React, Tailwind, and code Playground

by Alexandru Gatea

HTML

<div class="steps">
  <div class="step active" data-step="1">
    1
  </div>
  <div class="step" data-step="2">
    2
  </div>
  <div class="step" data-step="3">
    3
  </div>
  <div class="step" data-step="4">
    4
  </div>
</div>
<div class="btns">
  <span class="btn prev">Prev</span>
  <span class="btn next">Next</span>
</div>

SCSS

.step {
  display: none;
  padding: 20px;
  width: 200px;
  line-height: 2;
  background: #fff;
  border: 1px solid #ccc;
  margin: 50px;
  text-align: center;
  &.active {
    display: inline-block;
  }
}

.btns {
  margin: 0 50px;
  padding: 20px;
  width: 200px;
  text-align: center;
  span {
    display: inline-block;
    margin: 5px;
    padding: 10px;
    border: 1px solid #ccc;
    text-align: center;
    cursor: pointer;
    &:active {
      background: #eee;
    }
  }
}

JavaScript

jQuery(document).ready(function($) {
  //get total number of steps
  var totalSlides = $('.step').length;

  //get current element to be able to hide previous button or next button
  var currentElementNumber = parseInt($('.active').attr('data-step'));

  if (currentElementNumber == totalSlides) {
    $('.next').hide();
  } else if (currentElementNumber == 1) {
    $('.prev').hide();
  }

  $('.btn').on('click', function() {
    var currentElementNumber = parseInt($('.active').attr('data-step'));
    
		if (currentElementNumber >= 1 && currentElementNumber < totalSlides + 1) {
      $('.btn').show();
    }
    
		if (currentElementNumber == 2) {
      if ($(this).hasClass('prev')) {
        $('.prev').hide();
      }
    }
    
		if (currentElementNumber == totalSlides - 1) {
      if ($(this).hasClass('next')) {
				$('.next').hide();
			}
    }
		
  });

  // call functions on btns click

  $('.next').on('click', function() {
    moveNext($('.active'));
  });

  $('.prev').on('click', function() {
    movePrev($('.active'));
  });


  //write function for next

  function moveNext(activeElem) {
    var currentSlide = parseInt(activeElem.attr('data-step'));
    var nextSlide = currentSlide + 1;

    $('[data-step=' + currentSlide + ']').removeClass("active");
    $('[data-step=' + nextSlide + ']').addClass("active");
  }

  //write function for next
  function movePrev(activeElem) {
    var currentSlide = parseInt(activeElem.attr('data-step'));
    var prevSlide = currentSlide - 1;

    $('[data-step=' + currentSlide + ']').removeClass("active");
    $('[data-step=' + prevSlide + ']').addClass("active");
  }


});