I am facing an issue with hiding a div (class="login-form") and displaying it only after clicking the Login button on my HTML page using jQuery. However, despite clicking the button, the login form does not appear. Can anyone help me understand why this happens?
Thanks in advance!
HTML---------------------------------------------------------------------------
<?php /* Template Name: Virtual-tour */ ?>
<head>
<link rel="stylesheet" href="stylus/main.css"/>
<link href='https://fonts.googleapis.com/css?family=Alegreya+Sans' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- <script src=js/showLogin.js></script>
<script src=js/showCreateAccount.js></script>
<script src=js/submitLogin.js></script>
<script src=js/submitCreateAccount.js></script>
<script src=js/validate.js></script> -->
</head>
<body>
<div class="virtual-tour-media-player">
<span> placeholder for media player</span>
</div>
<div class="instructions">
Are you a family member or friend of a veteran on this memorial?</br></br>
<span id="instruction-sub">
To contribute information and memories, please Login or Create Account below.</br>
</span>
<button id="login">Login</button>
<button id="create-account">Create Account</button>
</div>
<div class="login-form">
<form>
<input type="text" placeholder="Email Address" />
<input type="password" placeholder="Password" />
</form>
</div>
<script>
$(document).ready(function() {
$("#login").click(function(){
$('.login-form').show();
});
$('#create-account').click(function{
$(".create-account-form").show();
});
});
</script>
Stylus (a CSS preprocessor, very similar syntax to CSS)---------------------------------------------------
body
color #ffffff
background-color #292929
font-family 'Alegreya Sans', sans-serif
.virtual-tour-media-player
width 90%
height 40%
margin auto
border 3px solid white
.instructions
padding-top 30px
margin auto
margin-top 5%
font-size 100%
width 45%
height 22%
text-align center
background-color #740600
box-shadow 2px 2px 2px 2px #232421
#instruction-sub
font-size 15px
//color #4d4d4d
button
line-height 1.8
border none
color #f1f1f1
background-color #0c083e
margin auto
margin-top 10%
width 40%
height 15%
button:hover
background-color #292929
.login-form
display none