引导程序中的弹出框无法正常工作

Question

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;
        });
    });

Answer 1

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;
        });
    });