Untitled

<!DOCTYPE html>
<html>
<head>
  <title>form</title>
</head>
<body>
  <button id="clickForm1">Form 1</button> | <button id="clickForm2">Form 2</button>

  <hr>

  <!-- Form 1 -->
  <form id="form1" style="display: none;">
    <h3>Login - Form 1</h3>
    <div>
      <label>Username:</label>
      <input type="text" name="">
    </div>
    <div>
      <label>Password:</label>
      <input type="password" name="">
    </div>
    <input type="submit" name="" value="Login!">
  </form>

  <!-- Form 2 -->
  <form id="form2" style="display: none;">
    <h3>Register - Form 2</h3>
    <div>
      <label>Email:</label>
      <input type="email" name="">
    </div>
    <div>
      <label>Username:</label>
      <input type="text" name="">
    </div>
    <div>
      <label>Password:</label>
      <input type="password" name="">
    </div>
    <input type="submit" name="" value="Register!">
  </form>

<script type="text/javascript">
document.getElementById("clickForm1").addEventListener("click", toggleForm1);
document.getElementById("clickForm2").addEventListener("click", toggleForm2);

function toggleForm1() {
  var form1 = document.getElementById("form1");
  if (form1.style.display === "none") {
    form1.style.display = "block";
  } else {
    form1.style.display = "none";
  }
}

function toggleForm2() {
  var form2 = document.getElementById("form2")
  if (form2.style.display === "none") {
    form2.style.display = "block";
  } else {
    form2.style.display = "none";
  }
}
</script>
</body>
</html>