Have text input slide over to reveal new text input on enter? Then slide back?
<p>Alright right now I have 1 form and 1 text input field:</p>

<pre><code>echo '&lt;form class="changePassForm" action="" method="post" enctype="multipart/form-data"&gt;';
echo '&lt;input class = "passwordText" type="password" placeholder="Change Password" name="passwordText"&gt;';
echo '&lt;input class = "oldPass" type="password" placeholder="Enter Old Password" name="oldPass"&gt;';
echo '&lt;/form&gt;';
</code></pre>

<p>When the user presses enter on the passwordText input, the text entered is passed in a variable to a php file:</p>

<pre><code>$(".passwordText").keydown(function(event){
    if(event.keyCode == 13){
      var pass = $(this).val();
        //var pass = document.getElementById("p2");
    $.ajax({
        url: "../php/passwordchange.php", // Url to which the request is send
        type: "POST",             // Type of request to be send, called as method
        data: 'passwordText=' + pass, // data sent to php file
        success: function(data)   // A function to be called if request succeeds
        {
            console.log(data);

        }});    
     console.log("WORKS!!");   
    }
});
</code></pre>

<p>When this happens, I need the .passwordText input field to slide over and become hidden (not able to interacted with) so I can get the value from a second text input. I do not know how to do this as I am a beginner with javascript. </p>

<p>The following is my CSS for reference:</p>

<pre><code>.changePassForm input {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  outline: 0;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background-color: rgba(255, 255, 255, 0.2);
  width: 250px;
  border-radius: 3px;
  padding: 10px 15px;
  margin: 0 auto 10px auto;
  display: block;
  text-align: center;
  font-size: 18px;
  color: white;
  -webkit-transition-duration: 0.25s;
          transition-duration: 0.25s;
  font-weight: 300;
}
.changePassForm input:hover {
  background-color: rgba(255, 255, 255, 0.4);
}
.changePassForm input:focus {
  background-color: white;
  width: 300px;
  color: #53e3a6;
}
.changePassForm button {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  outline: 0;
  background-color: white;
  border: 0;
  padding: 10px 15px;
  color: #53e3a6;
  border-radius: 3px;
  width: 250px;
  cursor: pointer;
  font-size: 18px;
  -webkit-transition-duration: 0.25s;
          transition-duration: 0.25s;
}
.changePassForm button:hover {
  background-color: #f5f7f9;
}
</code></pre>

<p>How can I move the first input over to get the value from a 2nd text input?</p>