Login Form Show/Hide

by raad

HTML

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="region-main">
  <div class="main">
    <div class="row">
      <div class="col-xl-6 push-xl-3 m-2-md col-sm-8 push-sm-2">

        <div class="row" id="yui_3_17_2_1_1508144159227_24">

          <div class="col-md-4 push-md-1">
            <button type="button" class="btn btn-secondary btn-block m-t-1" id="loginraven">Raven</button>
            <button type="button" class="btn btn-secondary btn-block m-t-1" id="loginfriends">Friends</button>

            <form class="m-t-1" action="https://dev.vle.internal.admin.cam.ac.uk/login/index.php" method="post" id="login">
              <input id="anchor" type="hidden" name="anchor" value="">
              <script>
                document.getElementById('anchor').value = location.hash;
              </script>

              <div class="input-group" id="yui_3_17_2_1_1508144159227_32">
                <label for="username" class="sr-only">Username</label>
                <span class="input-group-addon" id="username-decoration"><i class="fa fa-user" aria-hidden="true"></i></span>
                <input type="text" name="username" id="username" class="form-control" value="" placeholder="Username" aria-label="Username" aria-describedby="username-decoration">
              </div>

              <div class="input-group" id="yui_3_17_2_1_1508144159227_30">
                <label for="password" class="sr-only">Password</label>
                <span class="input-group-addon" id="password-decoration"><i class="fa fa-lock" aria-hidden="true"></i></span>
                <input type="password" name="password" id="password" class="form-control" value="" placeholder="Password" aria-label="Password" aria-describedby="password-decoration">
    ...

CSS

.main {
  padding: 30px;
}

.col-md-4 {
  padding: 10px;
  margin: 20px 0;
  background: #ccf;
}

#login {
  display: none;
}

JavaScript

var loginform = '#login';
var container = 'div.col-md-4.push-md-1';

$("#loginfriends").on("click", function() {
  $(container).hide('blind', null, 500, function() {
  	$(loginform).show();
    $('#loginraven').hide();
    $('#loginfriends').hide();
    $(container).show('blind', null, 500);
  });
});

$("#cancelbtn").on("click", function() {
  $(container).hide('blind', null, 500, function() {
  	$(loginform).hide();
    $('#loginraven').show();
    $('#loginfriends').show();
    $(container).show('blind', null, 500)
  });
});