添加这段代码就可以了。这是关于反转你的步骤：

$("input[value=Yes]").click(function(){
    //reset - reverse all the steps
    $(".button").show();
    $(".slidethis").fadeOut(800).css("display","none");
    $(".wrapper").css("display","inline-block");
    $(".popup").hide();
    $(".seconddiv").hide();
    $(".firstdiv").show();
});

$("input[value=No]").click(function(){
   $(".popup").hide();

});

字符串
更新小提琴：https://jsfiddle.net/5353ntuf/5/

Working fiddle。

你应该在两个按钮Yes和No上添加一个事件点击，所以给予它们一个公共类，例如confirm类：

<input type="button" class='confirm' value="Yes" />
<input type="button" class='confirm' value="No" />

字符串
然后添加一个条件来检查要执行的操作，例如：

//Confirm buttons
$("body").on("click", ".confirm", function() {
  $(".popup").hide();

  if ($(this).val() == 'No') 
  {
    $('form input').val(""); //Reset form
  } else {
    $(".seconddiv,.slidethis").hide();
    $(".firstdiv,.button").show();
    $(".wrapper").css("display", "inline-block");
  }
});

型

//slide open the main panel
$(".button").click(function(e) {
  e.preventDefault();
  $(this).hide();
  $(".slidethis").fadeIn(800).css("display", "inline-block");
  $(".wrapper").css("display", "block");
});

$(".seconddiv").hide();
//forstdiv click 
$(".firstdiv").click(function() {
  $(this).hide();
  $(".seconddiv").show();
});

//Close button 
$(".close_icon").click(function() {
  $(".popup").show();
});

//Confirm buttons
$("body").on("click", ".confirm", function() {
  $(".popup").hide();

  if ($(this).val() == 'No') {
    $('form input').val("");
  } else {
    $(".seconddiv,.slidethis").hide();
    $(".firstdiv,.button").show();
    $(".wrapper").css("display", "inline-block");
  }
});

x

.wrapper {
  background: #9ac366;
  display: inline-block;
}

.headcard {
  display: inline-block;
  text-align: center;
  padding: 3% 30px;
  float: left;
}

.slidethis {
  background: #b67fd8;
  padding: 20px 0;
  width: 70%;
  vertical-align: top;
  position: relative;
  height: 228px;
  display: none;
  position: relative
}

.firstdiv,
.seconddiv {
  width: 200px;
  border: #888 solid 2px;
  padding: 20px;
}

.close_icon {
  background: #333;
  color: #fff;
  padding: 4px;
  float: right;
  margin-top: -20px;
  text-decoration: none
}

.popup {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background: #e4e4e4;
  text-align: center;
  padding-top: 5%;
  display: none
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="wrapper">
  <div class="headcard">
    <h4>Brand Name</h4>
    <a href="#" class="button">Join Now </a>
  </div>

  <!--this is hidden by default-->
  <div class="slidethis">

    <div class="firstdiv">
      Click here to open the form
    </div>

    <div class="seconddiv">
      <form>
        <a href="#" class="close_icon">X</a>
        <input placeholder="name" />
        <input placeholder="email" />
      </form>
      <!--close pop up-->
      <div class="popup">
        Closing will clear the form data. Do you want ot close?
        <br/>
        <input type="button" class='confirm' value="Yes" />
        <input type="button" class='confirm' value="No" />
      </div>
    </div>

  </div>
</div>

的一种或多种