My aim is to create a toggle effect that fades in a login box when the 'login' button is clicked. Initially, I want the box to be hidden using display: none so it's not visible or interactive (I wasn't sure if changing visibility would affect button functionality - maybe altering pointer events could help).
The toggle operation works smoothly, except for the first click on the button, where the hide class is removed (revealing the box), but then the toggle fades OUT the box.
Here's the HTML:
<a id="loginBtn" class="loginBtn" href="/">Login</a>
<div id="loginContainer" class="loginContainer hide">
<a class="registerBtn" href="/">Register</a>
</div>
CSS styles applied:
.loginBtn {
color: #1493d1;
background: #fff;
border-radius: 98px;
cursor: pointer;
margin: 15px 0 0 0;
padding: 8px 15px;
position: absolute;
right: 0px;
/*float: right;*/
text-decoration: none;
}
.loginContainer {
width: 175px;
height: 250px;
background: #fff;
border-radius: 10px;
position: absolute;
top: 80px;
right: 0px;
/*float: right;*/
}
.hide {
display: none !important;
}
And here's the JavaScript function:
$(document).ready(function () {
var loginBtn = document.getElementById("loginBtn");
// Function to display Login box
function displayLogin() {
$('#loginContainer').removeClass("hide");
$('#loginContainer').fadeToggle("fast");
}
// Event listener setup
loginBtn.addEventListener("click", displayLogin);
}); // End of Document Ready