How do I style my divs so that when I click on sign up, the sign in div hides and vice versa? I have tried using this JS code, but both divs appear simultaneously on the window. How can I modify the code to achieve the desired behavior of hiding one div while showing the other?
$(document).ready(function() {
$("#signIn").click(function() {
$(".signUpHide").hide(600);
$(".signInShow").show(600);
$(this).hide();
$("#signUp").show();
});
});
$(document).ready(function() {
$("#signUp").click(function() {
$(".signInHide").hide(600);
$(".signUpShow").show(600);
$(this).hide();
$("#signIn").show();
});
});body {
height: 100vh;
width: 208vh;
}
.leftPanel {
background-color: #660033;
width: 70%;
height: 100%;
float: left;
position: absolute;
}
.rightPanel {
background-color: white;
width: 30%;
height: 100%;
float: right;
}
.signInClass {}
.signInHide {}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="rightPanel">
<div class="container">
<div class="row" style="margin-top: 30px">
<label class="col-md-3"></label>
</div>
<div class="signUpHide signUpShow">
<div class="row" style="margin-top: 30px">
<label class="col-md-2"></label>
<h1 class="col-md-10"><a name="SignUp">Sign Up</a></h1>
<label class="col-md-2"></label>
<label>or <a href="#SignIn">sign in</a> to your account</label>
</div>
<form action="bbSignUp.php" method="post">
<div class="row" style="margin-top: 20px">
<label class="col-md-2"></label>
<input type="text" class="form-control col-md-8" placeholder="Username" name="user-name">
<label class="col-md-2"></label>
</div>
// More form elements...
</form>
</div>
<div class="signInShow signInHide">
<div class="row" style="margin-top: 30px">
<label class="col-md-2"></label>
<h1 class="col-md-10"><a name="SignIn">Sign In</a></h1>
<label class="col-md-2"></label>
<label>or <a href="#SignUp">create an account</a></label>
</div>
<form action="bbSignIn.php" method="post">
// Form elements...
</form>
</div>
</div>
</div>