javascript - ToggleFade an element with display:none? -
i'm trying toggle fade login box when 'login' button pressed. until 'login' button pressed want box hidden display: none can't seen or interacted (i wasn't sure if having no visibility prevent buttons being clicked - maybe pointer events altered though).
the toggle works fine except first time button pressed in hide class removed (displaying box) toggle fades out box.
html:
<a id="loginbtn" class="loginbtn" href="/">login</a> <div id="logincontainer" class="logincontainer hide"> <a class="registerbtn" href="/">register</a> </div> css:
.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; } js:
$(document).ready(function () { var loginbtn = document.getelementbyid("loginbtn"); //display mobile navigation on hamburger click function displaylogin() { $('#logincontainer').removeclass("hide"); $('#logincontainer').fadetoggle("fast"); } //event listeners loginbtn.addeventlistener("click", displaylogin); }); //doc ready
please find below mentioned solution.
$(document).ready(function () { var loginbtn = document.getelementbyid("loginbtn"); //display mobile navigation on hamburger click function displaylogin(e) { e.preventdefault(); $('#logincontainer').fadetoggle("fast"); $('#logincontainer').removeclass("hide"); } //event listeners loginbtn.addeventlistener("click", displaylogin); });.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; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a id="loginbtn" class="loginbtn" href="/">login</a> <div id="logincontainer" class="logincontainer hide"> <a class="registerbtn" href="/">register</a> </div>let me know if not works.
Comments
Post a Comment