JSFiddle - React, Tailwind, and code Playground

by Stefan Zamfira

HTML

<a href="#" id="next">Go to next step</a>
<a href="#" id="prev">Go to prev step</a>
<div id="steps_container">
    <div class="step">Step 1</div>
    <div class="step">Step 2</div>
    <div class="step">Step 3</div>
    <div class="step">Step 4</div>
    <div class="step">Step 5</div>
    <div class="step">Step 6</div>
</div>

JavaScript

$(document).ready(function(){
  
  //At start we need to show only first step
  $('#steps_container .step').not(':first').hide(); 
    
  $('#next, #prev').click(function(){
    var t = $(this),
        current = $('#steps_container').find( '.step:visible' ),
        //Below we have an if statement, but the short way . before "?" is the condition
        // between "?" and ":" is what we do if it is true and after ":" what is false
        stepGo = ( t.attr( 'id' ) == 'next' ? current.next() : current.prev() );
  
    if ( stepGo.length ) { // Check if we still have steps
      current.fadeOut( 'slow', function(){
        //Here is a callback. Code below will run after the fadeOut stuff was done
        stepGo.fadeIn( 'slow' );
      });
    };
    return false; //Now the "click" default action is canceled and it calls only code above
      
      
  });
});