We Keep Coding

Why is my hide() and show() not working even without error in JQuery? [duplicate]

This question already has answers here:
Can I make a <button> not submit a form?
(8 answers)
Closed 1 year ago.
I have a function that will show the other content and hide the recent content. But when I am clicking the submit input it's not working. I tried to use anchor tag and button tag and it has the same output.
html:
$(function(){
$('.btn .button').on('click', function(){
$('.container').show()
$('.container-two').hide()
})
})
* {
text-decoration: none;
}
body {
background: #8390A2;
}
.student {
padding-top: 10px;
padding-bottom: 20px;
}
.form .student div {
padding: 10px;
}
.form .student div input {
background: #f1f5f9;
margin-top: 5px;
height: 20px;
}
.student-name {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.form .student-name div {
padding: 10px;
}
.form .student-name div input {
background: #f1f5f9;
margin-top: 5px;
height: 20px;
}
.title-header {
border-top-right-radius: 10%;
border-top-left-radius: 10%;
border-bottom: 1px solid grey;
height: 40px;
background: #efefef;
}
.title-header h3 {
text-align: center;
padding: 9px;
}
.form form div .info {
position: relative;
}
.form .info label {
position: absolute;
color: grey;
pointer-events: none;
top: 36px;
left: 15px;
transition: 0.5s ease;
}
.form .info input:focus ~ label {
transform: translateY(-20px);
color: black;
}
.form .info input {
outline: none;
border: none;
border-bottom: 1px solid silver;
padding-top: 20px;
}
.form .student div:first-child input {
width: 95%;
}
.form .info input:focus {
border-color: #4CCEE8;
}
.form .btn {
position: absolute;
padding-top: 50px;
right: 36.5%;
}
.form .btn input,
.form-two .btn input {
border-radius: 15px;
outline: none;
width: 100px;
height: 40px;
}
.form-two .address div {
padding: 10px;
}
.address .info-two {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.form-two .student-info div {
padding: 10px;
}
.form-two .student-info div input {
background: #f1f5f9;
margin-top: 5px;
height: 20px;
}
.form-two .address div input {
background: #f1f5f9;
margin-top: 5px;
height: 20px;
}
.form-two .student-info div input {
background: #f1f5f9;
margin-top: 5px;
height: 20px;
}
.form-two form div .info {
position: relative;
}
.form-two .info label {
position: absolute;
color: grey;
pointer-events: none;
top: 36px;
left: 15px;
transition: 0.5s ease;
}
.form-two .info input:focus ~ label {
transform: translateY(-20px);
color: black;
}
.form-two .info input {
outline: none;
border: none;
border-bottom: 1px solid silver;
padding-top: 20px;
}
.form-two .address div:first-child input {
width: 95%;
}
.form-two .address div:last-child div {
padding-left: 1px;
}
.form-two .address div:last-child div label {
left: 8px;
}
.form-two .info input:focus {
border-color: #4CCEE8;
}
.form-two .btn {
position: absolute;
padding-top: 14px;
right: 36.5%;
}
.active {
display: none;
}
main {
border-radius: 1%;
background: #f1f5f9;
width: 27rem;
min-height: 30rem;
margin: auto;
margin-top: 13rem;
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2)
}
form h4 {
margin: 10px;
}
#media only screen and (max-width: 1366px) {
main {
background: #f1f5f9;
width: 27rem;
min-height: 30rem;
margin: auto;
margin-top: 5rem;
}
}
<div class="container">
<main>
<div class="form">
<div class="title-header">
<h3>Personal Data Information</h3>
</div>
<form action="" method="POST">
<div class="student">
<div class="info">
<input type="text" name="Program">
<label>Program</label>
</div>
<div class="info">
<input type="text" name="Student #">
<label>Student #</label>
</div>
</div>
<h4>Student Name</h4>
<div class="student-name">
<div class="info">
<input type="text" name="Surname" id="surname">
<label>Surname</label>
</div>
<div class="info">
<input type="text" name="Given Name" id="givenname">
<label>Given Name</label>
</div>
<div class="info">
<input type="text" name="Middle Name" id="middlename">
<label>Middle Name</label>
</div>
<div class="info">
<input type="text" name="Auxillary Name" id="auxillaryname">
<label>Auxillary Name</label>
</div>
</div>
<div class="btn">
<input type="submit" name="submit" value="Continue" class="button">
</div>
</form>
</div>
</main>
</div>
<div class="container-two active">
<main>
<div class="form-two">
<div class="title-header">
<h3>Personal Data Information</h3>
</div>
<form action="" method="POST">
<h4>Address</h4>
<div class="address">
<div class="info">
<input type="text" name="City Address">
<label>City Address</label>
</div>
<div class="info-two" style="padding: 0px;">
<div class="info">
<input type="text" name="Student #" style="width: 70%;">
<label>Zip Code</label>
</div>
<div class="info">
<input type="text" name="Student #" style="width: 70%;">
<label>Tel no.</label>
</div>
</div>
<div class="info">
<input type="email" name="Student #" style="width: 95%;">
<label>Email Address</label>
</div>
<div class="info">
<input type="text" name="City Address" style="width: 95%;">
<label>Home Address</label>
</div>
<div class="info">
<input type="text" name="Student #" style="width: 34%;">
<label>Zip Code</label>
</div>
</div>
<div class="btn">
<input type="submit" name="submit" value="Continue">
</div>
</form>
</div>
</main>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" charset="utf-8"></script>
I tried to use addClass() and removeClass(), also css() but nothing happens. I also find an answer but nothing like my problem.

First of all, change the first submit type input to a button.
Instead of <input type="submit" name="submit" value="Continue" class="button">
Should be <button class="button" type="button">Continue</button>
This will prevent the form submission, and add the missing "button" class to the button.
Then modify the jquery code like this:
$(function(){
$('.btn .button').on('click', function(e){
$('.container').hide()
$('.container-two').show()
})
})
My answer was based on the assumption that you want to show the second container after pressing the first "continue" button.
$(function(){
$('.btn .button').on('click', function(e){
$('.container').hide();
$('.container-two').show();
});
});
* {
text-decoration: none;
}
body {
background: #8390A2;
}
.student {
padding-top: 10px;
padding-bottom: 20px;
}
.form .student div {
padding: 10px;
}
.form .student div input {
background: #f1f5f9;
margin-top: 5px;
height: 20px;
}
.student-name {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.form .student-name div {
padding: 10px;
}
.form .student-name div input {
background: #f1f5f9;
margin-top: 5px;
height: 20px;
}
.title-header {
border-top-right-radius: 10%;
border-top-left-radius: 10%;
border-bottom: 1px solid grey;
height: 40px;
background: #efefef;
}
.title-header h3 {
text-align: center;
padding: 9px;
}
.form form div .info {
position: relative;
}
.form .info label {
position: absolute;
color: grey;
pointer-events: none;
top: 36px;
left: 15px;
transition: 0.5s ease;
}
.form .info input:focus ~ label {
transform: translateY(-20px);
color: black;
}
.form .info input {
outline: none;
border: none;
border-bottom: 1px solid silver;
padding-top: 20px;
}
.form .student div:first-child input {
width: 95%;
}
.form .info input:focus {
border-color: #4CCEE8;
}
.form .btn {
position: absolute;
padding-top: 50px;
right: 36.5%;
}
.form .btn input,
.form-two .btn input {
border-radius: 15px;
outline: none;
width: 100px;
height: 40px;
}
.form-two .address div {
padding: 10px;
}
.address .info-two {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.form-two .student-info div {
padding: 10px;
}
.form-two .student-info div input {
background: #f1f5f9;
margin-top: 5px;
height: 20px;
}
.form-two .address div input {
background: #f1f5f9;
margin-top: 5px;
height: 20px;
}
.form-two .student-info div input {
background: #f1f5f9;
margin-top: 5px;
height: 20px;
}
.form-two form div .info {
position: relative;
}
.form-two .info label {
position: absolute;
color: grey;
pointer-events: none;
top: 36px;
left: 15px;
transition: 0.5s ease;
}
.form-two .info input:focus ~ label {
transform: translateY(-20px);
color: black;
}
.form-two .info input {
outline: none;
border: none;
border-bottom: 1px solid silver;
padding-top: 20px;
}
.form-two .address div:first-child input {
width: 95%;
}
.form-two .address div:last-child div {
padding-left: 1px;
}
.form-two .address div:last-child div label {
left: 8px;
}
.form-two .info input:focus {
border-color: #4CCEE8;
}
.form-two .btn {
position: absolute;
padding-top: 14px;
right: 36.5%;
}
.active {
display: none;
}
main {
border-radius: 1%;
background: #f1f5f9;
width: 27rem;
min-height: 30rem;
margin: auto;
margin-top: 13rem;
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2)
}
form h4 {
margin: 10px;
}
#media only screen and (max-width: 1366px) {
main {
background: #f1f5f9;
width: 27rem;
min-height: 30rem;
margin: auto;
margin-top: 5rem;
}
}
<div class="container">
<main>
<div class="form">
<div class="title-header">
<h3>Personal Data Information 1</h3>
</div>
<form action="" method="POST">
<div class="student">
<div class="info">
<input type="text" name="Program">
<label>Program</label>
</div>
<div class="info">
<input type="text" name="Student #">
<label>Student #</label>
</div>
</div>
<h4>Student Name</h4>
<div class="student-name">
<div class="info">
<input type="text" name="Surname" id="surname">
<label>Surname</label>
</div>
<div class="info">
<input type="text" name="Given Name" id="givenname">
<label>Given Name</label>
</div>
<div class="info">
<input type="text" name="Middle Name" id="middlename">
<label>Middle Name</label>
</div>
<div class="info">
<input type="text" name="Auxillary Name" id="auxillaryname">
<label>Auxillary Name</label>
</div>
</div>
<div class="btn">
<button class="button" type="button">Continue</button>
</div>
</form>
</div>
</main>
</div>
<div class="container-two active">
<main>
<div class="form-two">
<div class="title-header">
<h3>Personal Data Information 2</h3>
</div>
<form action="" method="POST">
<h4>Address</h4>
<div class="address">
<div class="info">
<input type="text" name="City Address">
<label>City Address</label>
</div>
<div class="info-two" style="padding: 0px;">
<div class="info">
<input type="text" name="Student #" style="width: 70%;">
<label>Zip Code</label>
</div>
<div class="info">
<input type="text" name="Student #" style="width: 70%;">
<label>Tel no.</label>
</div>
</div>
<div class="info">
<input type="email" name="Student #" style="width: 95%;">
<label>Email Address</label>
</div>
<div class="info">
<input type="text" name="City Address" style="width: 95%;">
<label>Home Address</label>
</div>
<div class="info">
<input type="text" name="Student #" style="width: 34%;">
<label>Zip Code</label>
</div>
</div>
<div class="btn">
<input type="submit" name="submit" value="Continue">
</div>
</form>
</div>
</main>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

I copied and pasted the code to codepen and found that he is trying to show the div which is already visible and trying to hide the div which is already hidden, so replaced the hide() and show() with each other.
prevent the default submit event and add hide() and show() on correct divs
$(function(){
$('.btn .button').on('click', function(e){
e.preventDefault();
$('.container').hide()
$('.container-two').show()
})
})

What is the error in my form email input . It always returns false while submitting

I think the problem is in the jQuery. Whenever some value is entered in the Email input and try to submit the form It shows false weather the value is correct or not. Please help me. My whole code is down please go through it and please check the jQUERY SECTION thoroughly as I think the problem is not in HTML it is in the jQuery
Responses will be appreciated.
function isEmail(email) {
var regex = /^([a-zA-Z0-9_.+-])+\#(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
return regex.test(email);
}
$("#submit").click(function() {
alert(isEmail($("#email").val()));
});
body{
font-family: Lato;
font-size: 200%
}
input{
height: 40px;
padding: 5px 5px 12px 5px;
font-size: 25px;
border-radius: 5px;
border: 1px solid grey;
width: 320px;
}
label{
position: relative;
top: 5px;
float: left;
width: 275px;
}
#wrapper{
width: 625px;
margin: 0 auto;
}
.elements{
margin-bottom: 10px;
}
#submit{
width: 130px;
margin-left: 275px;
text-align: center;
background-color: lightgrey;
height: 55px;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<title>jQuery</title>
</head>
<body>
<div id="wrapper">
<div class="elements">
<label for="Email">Email</label>
<input type="text" name="Email" id="Email" placeholder="eg:yourname#gmail.com">
</div>
<div class="elements">
<label for="Phone">Phone No</label>
<input type="text" name="Phone" id="Phone No" placeholder="eg:1234567890">
</div>
<div class="elements">
<label for="Password">Password</label>
<input type="password" name="Password" id="Password">
</div>
<div class="elements">
<label for="confirmPassword">ConfirmPassword</label>
<input type="password" name="confirmPassword" id="confirmPassword">
</div>
<div class="elements">
<input type="submit" id="submit" value="Sign Up">
</div>
</div>
</body>
</html>

#Nitish, If you aware then javascript is case sensitive your tag ID= "Email" whereas your click contains small e.
So replace
alert(isEmail($("#email").val()))
with
alert(isEmail($("#Email").val()))
and everything works!!

Your alert statement is incorrect. Try this:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<title>jQuery</title>
<style type="text/css">
body{
font-family: Lato;
font-size: 200%
}
input{
height: 40px;
padding: 5px 5px 12px 5px;
font-size: 25px;
border-radius: 5px;
border: 1px solid grey;
width: 320px;
}
label{
position: relative;
top: 5px;
float: left;
width: 275px;
}
#wrapper{
width: 625px;
margin: 0 auto;
}
.elements{
margin-bottom: 10px;
}
#submit{
width: 130px;
margin-left: 275px;
text-align: center;
background-color: lightgrey;
height: 55px;
}
</style>
</head>
<body>
<div id="wrapper">
<div class="elements">
<label for="Email">Email</label>
<input type="text" name="Email" id="Email" placeholder="eg:yourname#gmail.com">
</div>
<div class="elements">
<label for="Phone">Phone No</label>
<input type="text" name="Phone" id="Phone No" placeholder="eg:1234567890">
</div>
<div class="elements">
<label for="Password">Password</label>
<input type="password" name="Password" id="Password">
</div>
<div class="elements">
<label for="confirmPassword">ConfirmPassword</label>
<input type="password" name="confirmPassword" id="confirmPassword">
</div>
<div class="elements">
<input type="submit" id="submit" value="Sign Up">
</div>
</div>
<script type="text/javascript">
function isEmail(email) {
var regex = /^([a-zA-Z0-9_.+-])+\#(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
return regex.test(email);
}
$("#submit").click(function()
{
alert($("#Email").val());
});
</script>
</body>
</html>

jQuery are case sensitive.
You have :
<input type="text" name="Email" id="Email" placeholder="eg:yourname#gmail.com">
So you must use:
$("#submit").click(function() {
alert(isEmail($("#Email").val()));
});

you have mismatched the id for email. try changinbg id from #email to #Email in the jQuery and it will work
$("#submit").click(function() {
console.log($("#Email").val());
alert(isEmail($("#Email").val()));
});
function isEmail(email) {
var re = /^(([^<>()\[\]\\.,;:\s#"]+(\.[^<>()\[\]\\.,;:\s#"]+)*)|(".+"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(String(email).toLowerCase());
}
body{
font-family: Lato;
font-size: 200%
}
input{
height: 40px;
padding: 5px 5px 12px 5px;
font-size: 25px;
border-radius: 5px;
border: 1px solid grey;
width: 320px;
}
label{
position: relative;
top: 5px;
float: left;
width: 275px;
}
#wrapper{
width: 625px;
margin: 0 auto;
}
.elements{
margin-bottom: 10px;
}
#submit{
width: 130px;
margin-left: 275px;
text-align: center;
background-color: lightgrey;
height: 55px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<div class="elements">
<label for="Email">Email</label>
<input type="text" name="Email" id="Email" placeholder="eg:yourname#gmail.com">
</div>
<div class="elements">
<label for="Phone">Phone No</label>
<input type="text" name="Phone" id="Phone No" placeholder="eg:1234567890">
</div>
<div class="elements">
<label for="Password">Password</label>
<input type="password" name="Password" id="Password">
</div>
<div class="elements">
<label for="confirmPassword">ConfirmPassword</label>
<input type="password" name="confirmPassword" id="confirmPassword">
</div>
<div class="elements">
<input type="submit" id="submit" value="Sign Up">
</div>
</div>

Align cursor to placeholder starting position

I have the following HTML and CSS code and the output.
When I click the input boxes I want my cursor to be exactly just on the left of the placeholder text. But when I click the input the box the cursor shows up at the very start of the the input box.
How can i align the cursor to the placeholder starting character on focus.
Thanks
HTML
<head>
<title>AUMC-Student Portal</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css2/paper.css" rel="stylesheet" media="screen">
<link href="css2/myCSS.css" rel="stylesheet" media="screen">
</head>
<body>
<div class="Login-Form-Container">
<form class="Inner-Portion">
<div>
<input class="form-control" type="text" placeholder="Username" />
</div>
<br>
<div>
<input class="form-control" type="password" placeholder="Password" />
</div>
<br>
<select class="form-control controls">
<option selected>Laptop</option>
<option value="">Mouse</option>
<option value="">Keyboard</option>
<option value="">Monitor</option>
<option value="">Hello World</option>
</select>
<br>
<br>
<button type="button" class="btn btn-default">Forgot</button>
<button type="button" class="btn btn-primary">Login</button>
<form/>
</div>
</body>
</html>
CSS
body {
background-color: #293037;
background-size: 1500px;
}
.Login-Form-Container {
background-color: dodgerblue;
width: 400pt;
height: 310pt;
text-align: center;
margin: 0 auto;
}
.Inner-Portion {
background-color: whitesmoke;
width: 400pt;
height: 300pt;
padding-top: 57pt;
}
.controls , .Inner-Portion div{
margin: 0px auto;
width: 300px;
}
.form-control::-webkit-input-placeholder {
padding: 55px;
}
.Inner-Portion div{
border: solid 1px #DDDDDD;
}
.btn-default , .btn-primary {
width: 150px;
}
OUTPUT

You can use text-indent property.
input.form-control {
box-sizing: border-box;
width: 100%;
text-indent: 30px;
}
jsFiddle
Or just set some padding-left for it.
input.form-control {
box-sizing: border-box;
width: 100%;
padding-left: 30px;
}
jsFiddle

You may add:
input.form-control {
width: 100%;
padding-left: 55px;
}
and remove .form-control::-webkit-input-placeholder.
The snippet:
body {
background-color: #293037;
background-size: 1500px;
}
.Login-Form-Container {
background-color: dodgerblue;
width: 400pt;
height: 310pt;
text-align: center;
margin: 0 auto;
}
.Inner-Portion {
background-color: whitesmoke;
width: 400pt;
height: 300pt;
padding-top: 57pt;
}
.controls , .Inner-Portion div{
margin: 0px auto;
width: 300px;
}
input.form-control {
width: 100%;
padding-left: 55px;
}
.Inner-Portion div{
border: solid 1px #DDDDDD;
}
.btn-default , .btn-primary {
width: 150px;
}
<div class="Login-Form-Container">
<form class="Inner-Portion">
<div>
<input class="form-control" type="text" placeholder="Username" />
</div>
<br>
<div>
<input class="form-control" type="password" placeholder="Password" />
</div>
<br>
<select class="form-control controls">
<option selected>Laptop</option>
<option value="">Mouse</option>
<option value="">Keyboard</option>
<option value="">Monitor</option>
<option value="">Hello World</option>
</select>
<br>
<br>
<button type="button" class="btn btn-default">Forgot</button>
<button type="button" class="btn btn-primary">Login</button>
</form>
</div>

This Code is enough.
input {
padding-left: 10px;
}

you should make the padding to target the input and not the placeholder.
try something like this
.form-signin input[type="email"], .form-signin input[type="password"]{
padding: 14px 16px !important;
margin: auto;
font-size: 17px;
}

Don't apply styles to the placeholder rather make it global to the input the placeholder will apply automatically
.form-control{padding:14px 16px;}

CSS Animation Creation

I am new to CSS animations and have very little knowledge with animations specifically. My intention is to have the grey box come down from the top line above the login / register section. At the moment I have only got it fading in. If anybody can help that would be great.
Please run the code in your own browser to see how it's supposed to run.
P.S. The animation runs when the button is clicked.
If anybody can help that would be great.
var regbutton = document.getElementById('Register_Button');
var regpopup = document.getElementById('cover_for_register');
regbutton.onclick = function () {
"use strict";
regpopup.style.display = "block";
}
body{
margin: 0px auto;
}
button, input, p, h1, h2, h3, h4, h5, a{ /* State that these particular elements be "fantasy" */
font-family: Tahoma;
}
#home_container{
margin: 0px auto;
}
#home_left_section{
float: left;
height: 100%;
width: 55%;
background:-webkit-linear-gradient(#2aefff, #ffffff);
}
#home_right_section{
float: right;
height: 100%!important;
width: 45%;
box-shadow: 0px 0px 14px #888;
z-index: 10000;
background-color:aliceblue;
}
#home_right_section h1{
padding-bottom: 25px;
padding-top: 25px;
font-size: 60px;
margin: 0px;
text-align: center;
}
#home_right_section h2{
margin: 0px;
}
#home_right_section hr {
margin: 0px;
}
#login_register_container{
display:inline-block;
width: 100%;
}
#login_container{
text-align: center; /* If border is created, width must be changed */
float: left;
padding-right:50px;
padding-left: 30px;
padding-top: 20px;
margin-right: 0px auto;
background-color: aqua;
}
.login_input_fields{
border-radius:5px;
width: 200px;
padding: 5px;
border: 1px solid #bfbfbf;
font-size: 15px;
}
.register_popup_foot{
}
#register_container{
width: 50%;
float: right;
margin: 0px auto;
text-align:left;
}
#cover_for_register{
display: none;
position:fixed;
height: 52%;
width: 100%;
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
-webkit-animation-name: animateone;
-webkit-animation-duration: 1s;
}
#-webkit-keyframes animateone {
from {min-height:200px; opacity:0}
}
#Register_Button{
z-index: 10000;
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
width:100px;
height: 50px;
color: white;
text-align: center;
margin-top: 80px;
-moz-border-radius-bottomright: 10px;
border-bottom-right-radius: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-left-radius: 10px;
-moz-border-radius-topright: 10px;
border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
border-top-left-radius: 10px;
}
#Register_Button_Container{
width: 50%;
float: right;
margin: 0px auto;
text-align:center;
background-color: aqua;
height: 217px;
}
<html>
<body>
<head>
<title>Home</title>
<link rel="stylesheet" href="PTrainMeCSS.css">
<meta name="viewpoint" content="width=deive-width" />
<script type="text/javascript" src="PTrainMeJavascript.js"></script>
</head>
<div id="home_container">
<section id="home_left_section">
<h1></h1>
</section>
<section id="home_right_section">
<h1>GetFit</h1>
<hr />
<h3 id="welcome_text">Here you can find whatever service you may want throughout the fitness industry</h3>
<hr />
<div id="login_register_container">
<section id="login_container">
<h2>Login</h2>
<form>
<br />
<input class="login_input_fields" type="text" name="Username" maxlength="10" placeholder="Username / E-Mail" /><br /><br />
<input class="login_input_fields" type="password" name="Password" maxlength="20" placeholder="Password" />
<br />
<br />
<input type="submit" value="Login" />
</form>
<footer class="register_popup_foot">
<a class="register_loginform_foot_text" href="Forgot Password.html">Reset Password</a>
<br />
</footer>
</section>
<div id="Register_Button_Container">
<section>
<button id="Register_Button">Register</button>
</section>
</div>
<div id="cover_for_register">
<section id="register_container">
<h2>Register</h2>
<form>
<br />
<input class="login_input_fields" type="text" name="Username" maxlength="10" placeholder="Username"/>
<br /><br />
<input class="login_input_fields" type="text" name="E-Mail" placeholder="E-Mail"/>
<br /><br />
<input class="login_input_fields" type="password" name="Password" placeholder="Password"/>
<br /><br />
<label>Age:</label>
<br /> <select type="option" name="Age">
<option></option>
<option>13</option>
<option>14</option>
<option>15</option>
<option>16</option>
<option>17</option>
<option>18</option>
</select><br /><br />
Security Question: <br /><select type="select" name="Security Question">
<option>Please select one.</option>
<option>What was my school teachers first name?</option>
<option>Whats my favourite chip flavour?</option>
<option>What type was my first car?</option>
<option>What was the name of my first school?</option>
<option>What are my parents names?</option>
<option>How many siblings do i have?</option>
<option>What was the address of my first house?</option>
</select><br /> <br />
Answer: <br /> <input type="text" name="Answer">
Why<br /><br />
<input type="submit" value="Submit">
</form>
</section>
</div>
</div>
</section>
</div>
<script type="text/javascript" src="PTrainMeJavascript.js"></script>
</body>
</html>

Here is the quick solution,
make #cover_for_register = z-index highest from others and change your animation to
#-webkit-keyframes animateone {
from { top:-52%;}
to {top: 5%;}//desired margin from top to cover your login page.
}
it will work fine.

Only thing you have to change is as
#-webkit-keyframes animateone {
from { height:0%;}
to {height: 100%;}
}
AND add below point in CSS...
add top:0; position:absolute; to #cover_for_register
add position:relative; #login_register_container
Look at this : https://jsfiddle.net/dkrvl2011/se93orog/10/show/

click inside anywhere in the box,getting closed

input[type=checkbox] {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
width: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
}
.ds-drop-down {
background: url('../../images/light-grey-disclosure-arrow-down.png')no-repeat scroll center center transparent;
padding: 10px 5px;
height: 0px;
width: 8px;
position: absolute;
top: 63px;
border: 1px solid blue;
}
div#span-advanced-search {
border: 1px solid grey;
display: none;
left: 20px;
width: 600px;
padding: 10px;
}
div#span-advanced-search label{
width: 100px;
}
input[type=checkbox]:checked ~ div#span-advanced-search {
background: white;
display: block;
position: relative;
width: 564px;
padding: 10px;
visibility: visible;
left: -573px;
top: 11px;
}
<input class="ds-text-field " type="text">
<xsl:attribute name="name">
<xsl:value-of
select="/dri:document/dri:meta/dri:pageMeta/dri:metadata[#element='search'][#qualifier='queryField']"/>
</xsl:attribute>
</input>
<label for="toggle-1" class="ds-drop-down" role="button" data-tooltip="Show search options"/>
<input type="checkbox" id="toggle-1">
<div id="span-advanced-search">
<label>Education Level:</label> <input id="text_edulvl" type="text"/><br></br>
<label>Type of Learning Material:</label> <input id="text_lm" type="text"/><br></br>
<label>Difficulty Level:</label> <input id="text_difflvl" type="text"/><br></br>
<label>Author:</label> <input id="text_author" type="text"/><br></br>
</div>
This is my code snippet. When I click on the checkbox "toggle-1", the div "span-advanced-search" will open,it's right. But after open the div,when i am clicking anywhere inside the div,it's getting closed. So,i can't give any input to those inputs(i.e. Education Level,Author etc.). I want the div will be closed only when the checkbox will be unchecked.

Solution must be as I thought. I hope you are looking for this: http://jsfiddle.net/vhoeamcq/
function srchMoreActive(t){
if(t){
document.getElementById('srchMoreOpt').classList.remove('hid');
document.getElementById('srchMore').classList.add('hid');
}else{
document.getElementById('srchMoreOpt').classList.add('hid');
document.getElementById('srchMore').classList.remove('hid');
}
}
function form1Sub(){
}
function srch(){
}
#form1 #s00{padding: 5px 25px 5px 5px; width:300px; border:1px solid rgba(0,0,0,0.2);}
#form1 #srchMore{margin-left:-27px; cursor:pointer; color:#ccc;}
#form1 #srchMore:hover{color:#0ac;}
#form1 .srchMoreAct{color:#333;}
#form1 #srchMoreOpt{width:320px; height:350px; padding:5px; box-shadow:0 2px 4px rgba(0,0,0,0.2); border:1px solid rgba(0,0,0,0.2);}
#form1 .hid{display:none;}
#form1 #srchMoreOpt .exi{float:right; padding:5px 10px 5px 10px; font-family:'Arial'; cursor:pointer; background:#ccc; color:#666;}
#form1 #srchMoreOpt .exi:hover{background:#0ac; color:#fff;}
<form id="form1" action="" method="post" onSubmit="form1Sub()">
<input id="s00" name="s" type="text" value="" placeholder="Type to serach" onChange="srch()" />
<span id="srchMore" onClick="srchMoreActive(true)">▼</span>
<div id="srchMoreOpt" class="hid">
<span class="exi" onClick="srchMoreActive(false)">x</span>
<p>Form Details</p>
<p><input type="text" /></p>
</div>
</form>

try this Jquery:
$('#toggle-1').click(function(){
var a = $(this).is(":checked");
if(a){
$('#span-advanced-search').css("display","block")
}
else{
$('#span-advanced-search').css("display","none")
}
});