Untitled

<!DOCTYPE html>
<html>
		<head>
			 <meta charset="UTF-8"/>
			<title>login</title>
			<link rel="stylesheet" type="text/css" href="css/style.css"/>
			<script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
		</head>
	<body>
		<div id="container">
			<div class="loginbutton">
					<p>Login</p>
			</div>
			<div class="login_extended">
				<div class="login">
					<form>
							<div class="naamform">TINKR SIGN IN</div>
							<input type="text" name="email" placeholder="E-mail"/> <br />
							<input type="text" name="password" placeholder="Password"/><br />
							<button value="Login" class="marginbutton"> Login </button><br />
							<a href="#" class="formlink">Forgot password?</a>
					</form>
				</div>
							<hr/>
							<div class="create">Create Account</div>
					<div class="register">
						<form>
							<p class="naamform">Register</p>
								<input placeholder= "First name"/>
								<input placeholder= "Last name"/>
								<input placeholder= "E-mail"/>
								<input placeholder= "Password"/>
								<input placeholder= "Confirm Password"/>
								<input type="submit" value="register">
						</form>
					</div>
			</div>
		</div>
		<script type="text/javascript">

			$(document).ready(function(){
				$('.login_extended').hide(1);
				$('.register').hide(0);

				$('.loginbutton').click(function(){
					$('.login_extended').show();

				});
				$('.create').click(function(){
					$('.register').show();
					$('.login').hide(0);
				});
			})
$(document).mouseup(function(e)
{
    var loginScherm = $(".login_extended");
    if (!loginScherm.is(e.target) && loginScherm.has(e.target).length === 0)
    {
        loginScherm.hide();
    }
});
		</script>
	</body>
</html>