JSFiddle - React, Tailwind, and code Playground

by Jeroen Heijmans

HTML

<div class="step step1">
  Step 1
  <input placeholder="enter anything">
  <button>next</button>
  <div class="error hidden">ERROR!</div>
</div>
<div class="step step2 hidden">
  Step 2...
</div>

CSS

.step { background-color: #ddd; padding: 10px; }
.hidden { display: none; }

JavaScript

$(function() {
  "use strict";

  function isStep1Valid() { 
    console.log("isStep1Valid " + !!$("input").val());
    return !!$("input").val();
  }
  
  function leaveStep1() {
    console.log("leaveStep1");
    if (!isStep1Valid()) {
      console.log("rejecting...");
      return $.when(null);
    }  
    return $(".step1").slideUp().promise();
  }
  
  function enterStep2() {
    console.log("enterStep2");
    return $(".step2").slideDown().promise();
  }
  
  function handleFail() {
    console.log("handleFail");
    return $(".step1 .error").slideDown().promise();
  }
  
  function handleClick() {
    leaveStep1()
      .fail(handleFail)
      .done(enterStep2);
  }

  $("button").on("click", handleClick);
});