JSFiddle - React, Tailwind, and code Playground

by mkurzweil

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 <div class="step1 step">
  <a href="">click</a>
</div>
<div class="step2 step">
  <a href="">click</a>
</div>
<div class="step3 step">
  <a href="">click</a>
</div>
<div class="step4 step">
  <p>end!</p>
</div>

CSS

.step{opacity:0.3;}
.step1{opacity:1;}

JavaScript

var i = 1;

  if (i <= 4 ) {
    $('.step').each(function(){
      $(this).find('a').on('click', function(e){
        e.preventDefault();
        i++;
        $('.step' + i).animate({opacity: 1}, 200);
      });
    });
  };