JSFiddle - React, Tailwind, and code Playground

by techiedelight

HTML

<html>

  <head>
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
  </head>

  <body>
    <form id="register">
      <div class="form-group">
        <label for="email">Email address</label>
        <input type="email" class="form-control" id="email" placeholder="Enter email">
      </div>
      <div class="form-group">
        <label for="password">Password</label>
        <input type="password" class="form-control" id="password" placeholder="Password">
      </div>
      <button type="submit" class="btn btn-primary">Submit</button>
    </form>

    <div id="toggle">
      <button type="submit" id="hide" class="btn btn-primary">Hide Form</button>
      <button type="submit" id="show" class="btn btn-primary">Show Form</button>
    </div>

  </body>

</html>

CSS

form {
  padding: 20px;
  margin: 10px;
  border: 1px solid lightgray;
}

#toggle {
  padding: 20px;
  margin: 10px;
}

JavaScript

document.getElementById("hide").onclick = function() {
  document.getElementById("register").style.display = "none";
}

document.getElementById("show").onclick = function() {
  document.getElementById("register").style.display = "block";
}