Currently, I am working on developing a website using HTML, CSS, and JavaScript. As part of the process, I am looking to implement a login interface. I have already included some input fields and written a sign-in.js script that verifies whether a user has clicked on my designated symbol for logging in. Everything is functioning properly except for one key aspect: displaying the input fields when someone clicks on the "user-cog" button. Here is a snippet of my code:
Index.html:
<nav id="main-nav">
<i class="fa fa-bars" aria-hidden="true"></i>
<ul>
<a href="#home"><li> Home </li></a>
<a href="#about"><li> About </li></a>
<a href="#work"><li> Work </li></a>
<a href="#contact"><li> Contact </li></a>
<i class="fas fa-users-cog", id="user-cog"></i>
</ul>
<form id="sign-in">
<input class="input_text" type="text" tabindex="1" placeholder="E-Mail"><br>
<input class="input_text" type="text" tabindex="2" placeholder="Password"><br>
<input id="sign-in-button" class="button" type="submit">
</form>
</nav>
sign-in.js:
$(document).ready(function() {
$(".fa-users-cog").on("click", function() {
$("header nav ul i").toggleClass("sign-in-open");
});
});
style.css:
#main-nav ul i.sign-in-open{
/*YOUR CODE TO SHOW THE INPUTS SHOULD GO HERE*/
}
I would greatly appreciate any assistance in solving this issue. Should you require any additional information from me, please let me know.
Sincerely, Daniel.