I am facing an issue with the show/hide model on my website. When I click the link associated with it, nothing happens. I want it to function in a way that when I click "Sign up," the register form is displayed and when I click "Login," the register form is hidden and the login form is shown. Below is the code I have written. HTML:
<!DOCTYPE html>
<html>
<head>
<title>Login Page</title>
<link rel="stylesheet" href="style1.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="showhide.js"></script>
</head>
<body>
<div class="login-page">
<div class="form">
<form class="register-form">
<input type="text" placeholder="Name:">
<input type="password" placeholder="Password:">
<input type="email" placeholder="Email:">
<button>Create</button>
<p class="message">Already Registered? <a href='#'>Login</a></p>
</form>
<form class="login-form">
<input type="text" placeholder="Username">
<input type="password" placeholder="Password">
<button>Login</button>
<p class="message">Not Registered? <a href="#">Sign up</a></p>
</form>
</div>
</div>
</body>
</html>
JS:
$('.message a').click(function(){
$('form').animate({height: "toggle", opacity: "toggle"}, "slow");
});
Your help with this problem is greatly appreciated.