You are using the same id twice. Once to trigger the swap and once for the name of the form. Ids must be unique. Use a different id for the js click action from the name of the form.
e.g.
<h1>My First Heading</h1>
<p>My first paragraph.</p>
<button class="button btn2">Green</button>
<div class="bg-modal">
<div class="Modal-content">
<div class="close">+</div>
<form id="login2" action="">
<label for="Email">E=mail</label>
<input id="Email" type="email" placeholder="E-mail">
<label for="Password">Password</label>
<input id="Password" type="text" placeholder="Password">
<a class="btn_a1" href="">Submit</a>
<div class="span-alter">
<span class="">Forgot password ?<a id="resetpw"><b> Change here.</b></a></span>
<span class="">Not yet member ?<a href=""><b> Register here.</b></a></span>
</div>
</form>
<form id="reset-password" action="">
<label for="Email">E=mail</label>
<input id="Email" type="email" placeholder="E-mail">
<label for="Password">Password</label>
<input id="Password" type="text" placeholder="Password">
<a class="btn_a1" href="">Submit</a>
<div class="span-alter">
<span class="">Forgot password ?<a id="login-main"><b> Login here.</b></a></span>
<span class="">Not yet member ?<a href=""><b href=""> Register here.</b></a></span>
</div>
</form>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$(".close").click(function() {
$(".bg-modal").fadeOut("slow");
// $(".bg-modal").hide();
});
$(".btn2").click(function() {
$(".bg-modal").fadeIn("slow");
//$(".bg-modal").show();
});
$("#resetpw").on("click", function() {
$("#login2").css("display", "none");
$("#reset-password").css("display", "block");
e.preventDefault();
});
$("#login-main").on("click", function() {
$("#login2").css("display", "block");
$("#reset-password").css("display", "none");
e.preventDefault();
});
});
</script>
You would then need to hide the reset password field which can be done in CSS.
#reset-password {
display: none;
}
Although I guess you should hide it with js instead of CSS so is available if js is not working.
$("#reset-password").hide();
Don’t forget to change the modal to fixed and set its position otherwise the rules do not make sense.
.bg-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.6);
display: flex;
justify-content: center;
align-items: center;
}
Revised CSS with above changes:
.button {
background-color: #4caf50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
/*modal*/
.bg-modal {
position: relative;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.3);
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
}
.Modal-content {
display: flex;
justify-content: center;
align-items: center;
position: relative;
width: 480px;
height: auto;
margin: auto;
background-color: white;
text-align: center;
padding: 10px;
margin-left: 15px;
margin-right: 15px;
flex-wrap: wrap;
}
.Modal-content form {
flex: 1 0 100%;
margin: 20px auto;
}
.Modal-content input {
width: 80%;
height: 28px;
display: block;
margin: 20px auto;
}
Modal-content .span_alter {
display: inline-block;
}
.close {
position: absolute;
top: 16px;
right: 16px;
font-size: 42px;
transform: rotate(45deg);
cursor: pointer;
}
.Modal-content label {
position: relative;
text-align: left;
display: block;
width: 80%;
margin: auto;
}
.btn_a1 {
background-color: #4caf50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.span-alter .btn_a1 {
float: left;
}
HTML changes.
<h1>My First Heading</h1>
<p>My first paragraph.</p>
<button class="button btn2">Green</button>
<div class="bg-modal">
<div class="Modal-content">
<div class="close">+</div>
<form id="login2" action="">
<label for="Email">E=mail</label>
<input id="Email" type="email" placeholder="E-mail">
<label for="Password">Password</label>
<input id="Password" type="text" placeholder="Password">
<a class="btn_a1" href="">Submit</a>
<div class="span-alter">
<span class="">Forgot password ?<a id="resetpw"><b> Change here.</b></a></span>
<span class="">Not yet member ?<a href=""><b> Register here.</b></a></span>
</div>
</form>
<form id="reset-password" action="">
<label for="Email2">E=mail</label>
<input id="Email2" type="email" placeholder="E-mail">
<label for="Password2">Password</label>
<input id="Password2" type="text" placeholder="Password">
<a class="btn_a1" href="">Submit</a>
<div class="span-alter">
<span class="">Forgot password ?<a id="login-main"><b> Login here.</b></a></span>
<span class="">Not yet member ?<a href=""><b href=""> Register here.</b></a></span>
</div>
</form>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#reset-password").hide();
$(".close").click(function() {
$(".bg-modal").fadeOut("slow");
// $(".bg-modal").hide();
});
$(".btn2").click(function() {
$(".bg-modal").fadeIn("slow");
//$(".bg-modal").show();
});
$("#resetpw").on("click", function() {
$("#login2").css("display", "none");
$("#reset-password").css("display", "block");
e.preventDefault();
});
$("#login-main").on("click", function() {
$("#login2").css("display", "block");
$("#reset-password").css("display", "none");
e.preventDefault();
});
});
</script>
Remember ids must be different even in the forms that are shown and hidden.
