Indeed, I am aware that this question has been asked numerous times in the past. Despite trying other solutions, none seem to resolve my issue.
My objective is to have the "register" div slide down beneath the "container" div, rather than appearing next to it.
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<style>
.container
{
position: relative;
background-color: #00ffcc;
margin: 0 auto;
padding: 1em 3em;
box-shadow: 0px 0px 35px rgba(0, 0, 0, 1);
font-size: 15px;
display: none;
}
.register
{
position: relative;
background-color: #ff0066;
margin: 0 auto;
padding: 1em 3em;
box-shadow: 0px 0px 35px rgba(0, 0, 0, 1);
font-size: 15px;
display: none;
clear: left;
}
.background
{
display: flex;
align-items: center;
background-image: url("bg.jpg");
background-repeat: no-repeat;
background-size: cover;
width: 100vw;
height: 100vh;
float: none;
}
</style>
</head>
<body>
<div class="background">
<div class="container text-center" id="container">
<h1>Login</h1>
<br>
<form action="login.php" method="post">
<p>
Username:
</p>
<input name="name" type="text" class="form-control"/>
<br>
<p>
Password:
</p>
<input name="pw" type="password" class="form-control"/>
<br>
<button type="submit" class="btn btn-primary">Submit</button>
<button type="button" class="btn btn-danger" id="register">Register</button>
</form>
</div>
<div class="register text-center">
<form action="login.php" method="post">
<h1>Register</h1>
<p>
Username:
</p>
<input name="name" type="text" class="form-control"/>
<br>
<p>
Password:
</p>
<input name="pw" type="password" class="form-control"/>
<br>
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
<script>
$(document).ready(function(){
$("#container").delay(75).fadeIn(250);
$("#register").click(function(){
$(".register").slideToggle();
});
});
</script>
</body>
</html>
I would appreciate any assistance in resolving this issue (and if you have any suggestions for improving my messy css, please share them)! Thank you.