Jquery .live. add/removeclass for login slidup/slidedown

Ok, so I have a Login form and I'm using Jquery to display it in a DIV that is using .slideUp() and .slideDown() to display it.

Can anyone tell me why the form is doing a double-pump (slideup, slidedown, slideup) if you click the .account div to close it (trigger slideup)... ???

If I click outside the form and div it closes fine using this code ...

$(".modal_div").live("blur", function(){

        $(".account").removeClass('expand');
        $(this).slideUp();

});

Here is the code I'm using to slideup/slidedown...

$(".account").click(function() {

    if ($(".account").hasClass("expand")) {

        $(".account").removeClass("expand");
        $("#accdropdown").slideUp();
    } else {

        $(".account").addClass("expand");
        $("#accdropdown").slideDown();
        $("#login-username").focus();   
    }       
});

Here is the HTML ...

<div class="account">


    <div id="accdropdown" class="modal_div">
    <form action="" method="post">

        <p>
        <label for="login-username">Username</label><br>
        <input type="text" name="user_name" tabindex="1" id="login-username">
        </p>
        <p>
        <label for="login-password">Password</label><br>
        <input type="password" name="password" tabindex="2" id="login-password">
        </p>
        <p class="right">
        <button type="submit" tabindex="3"><span>Log in</span></button>

        </p>

        </form>
        </div>
        <p>Login</p>
    </div>开发者_开发百科

And the CSS just in case :) ...

.account {

    width: 100px;
    height: 78px;
    background: #939393;
    margin-right:100px;
    clear:both;
    float:right;
    cursor:pointer;
}


#accdropdown {
    position:absolute;

    right:0;
    top:22px;
    display:none;
    overflow:hidden;
    z-index:10000;
    width:170px;
    padding:6px 8px 6px;
    border:1px solid #ccc;
    text-align:left;
    background:#e4e4e4 none no-repeat 0 0;
    }

I've been ripping my hair out for hours on this, would really appreciate some advice ...

the issue is with your "blur" when you click on the gray box after opening the new input this is what happens.

first it blurs (goes up) then it runs the click [and since blur already ran] (it comes down)

now... how best to fix this?... to start with you probably don't want to use blur because when a user fills in their username and hits [tab], then the div dissapears...... How do you want it to function?

If you want it so the .modal_div goes away when a user clicks 'elsewhere' I would use an overlay.. here is an example.

PS: Also you should avoid live if you don't need it.

UPDATED Option 1: http://jsfiddle.net/mazlix/KztWD/3/

This puts the login above the overlay... if thats something you don't want, then use

Option 2: http://jsfiddle.net/mazlix/KztWD/4/

probably this will help

$(".account").click(function(event) {  

        $(".account").addClass("expand");
        $("#accdropdown").slideDown();
        return false;

});

    $(document).click(function(event) {
    if ( !$(event.target).hasClass('expand')) {
           $(".account").removeClass("expand");
        $("#accdropdown").slideUp();

    }
});

here is the fiddle http://jsfiddle.net/3nigma/tknKL/1/