What is the vanilla JavaScript equivalent of this jquery snippet of code

Question

The code is meant to toggle a form between register and login. Want to write it in plain javascript.

$('.message a').click(function(){
    $('form').animate({height: "toggle", opacity: "toggle"}, "slow");
});

html Code

<div class="form">
  <form class="register-form">
    <input type="text" placeholder="first name" />
    <input type="text" placeholder="last name" />
    <input type="password" placeholder="password" />
    <input type="text" placeholder="email address" />
    <input type="text" placeholder="mobile number" />
    <button>create</button>
    <p class="message">Already registered? <a href="#">Sign In</a></p>
  </form>
  <form class="login-form">
    <input type="text" placeholder="Email" />
    <input type="password" placeholder="Password" />
    <button>login</button>
    <p class="message">Not registered? <a href="#">Create an account</a></p>
  </form>
</div>

Js for now

const formToggle = document.querySelector('.message a');

I expect the forms to be swapped when the form toggle is clicked

Answer 1

If you can do the transition with css, you could do something like:

var btn = document.querySelector('.btn');
var form = document.querySelector('.form');
btn.onclick = function() {
  form.classList.toggle('closed');
}

form {
  max-height: 300px;
  opacity:1;
  overflow:hidden;
  transition: all 1s;
}
form.closed{
   opacity:0;
    max-height: 0px;
}

<form class="form">
  First name:<br>
  <input type="text" name="firstname" value="Mickey">
  <br>
  Last name:<br>
  <input type="text" name="lastname" value="Mouse">
</form>

<button class="btn">click</button>