I have a layout where on a click of a button a box should appear and on click of the same link the box should disappear
My complete code is here at JS Fiddle
The problem is that after opening the box on a click of a link, i change the content inside it by clicking on login/register, after that i am not able to close the box by clicking on the Main Link again, can anyone tell how it can be done
HTML CODE
<a href="#" class="login" data-toggle="dropdown" data-target="#demo"><b>Main Link</b> <span class="caret"></span></a>
<div id="demo" class="dropdown">
<ul id="loginbtn" class="dropdown-menu">
<li>
<form>
Login form
</form>
<a href="#" id="register">Register</a>
</li>
</ul>
<ul id="signupbtn" class="dropdown-menu">
<li>
<form>
Register form
</form>
<a href="#" id="login">Login</a>
</li>
</ul>
</div>
CSS
#signupbtn
{
display:none;
}
SCRIPT
$(document).ready(function(){
$("#register").click(function(e){
e.preventDefault();
$('#loginbtn').hide();
$('#signupbtn').show();
return false;
});
});
$(document).ready(function(){
$("#login").click(function(e){
e.preventDefault();
$('#loginbtn').show();
$('#signupbtn').hide();
return false;
});
});
One way should be with the use of hidden class instead.
JsFiddle : https://jsfiddle.net/p1a0v6kj/
HTML :
<a href="#" class="login" data-toggle="dropdown" data-target="#demo"><b>Login</b> <span class="caret"></span></a>
<div id="demo" class="dropdown">
<ul id="loginbtn" class="dropdown-menu">
<li>
<form>
Login form
</form>
<a href="#" id="register">Register</a>
</li>
</ul>
<ul id="signupbtn" class="dropdown-menu hidden">
<li>
<form>
Register form
</form>
<a href="#" id="login">Login</a>
</li>
</ul>
</div>
Js :
$(document).ready(function(){
$("#register").click(function(e){
e.preventDefault();
$('#loginbtn').addClass('hidden');
$('#signupbtn').removeClass('hidden');
return false;
});
});
$(document).ready(function(){
$("#login").click(function(e){
e.preventDefault();
$('#loginbtn').removeClass('hidden');
$('#signupbtn').addClass('hidden');
return false;
});
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.