Question

I’m trying to do Dropbox like login button.
There was a thread dropbox login popup method in jQuery? but I couldn’t do something on this.
I want it to be opened when I press the login button same as dropbox.com

This is an example code. Now it works on hover. But I want on click. I tried focus but couldn’t succeed.

<div id="login">
    <a href="#">Login</a>
    <div>
        Login Form
        Lorem Ipsum blablbalbabababa lbablaabalbalba
    </div>
</div>

And

div#login {
    position: relative;
    float: right;
    height: 20px;
    padding: 5px;
}
div#login:focus {
    background: rgba(0,0,0,.2);
}
div#login div {
    position: absolute;
    top:30px;
    right:0;
    width: 200px;
    height: 100px;
    padding: 10px;
    background: rgba(0,0,0,.2);
    visibility: hidden;
}
div#login:focus div {
    visibility: visible;
}

This is the demo of this code http://jsfiddle.net/sXmAe/

Probably it is easier with Jquery but I don’t know how.

Answer 1

Simply eliminate this rule:

div#login:focus div {
    visibility: visible;
}

And then this piece of jQuery will make it visible on click:

$("#login a").click(function(){
    $("#login div").css("visibility","visible");
});

You can see it action here: http://jsfiddle.net/jPPew/2/

(I added a margin so the JSFiddle “Result” banner wouldn’t get in the way of the click.”)

EDIT: If you require that the behavior also “close” the login area if you click elsewhere, try something like this: http://jsfiddle.net/jPPew/6/

$("#login").click(function(e){
    $("#login div").css("visibility","visible");
    e.stopPropagation();
});

$("body").click(function(e){
    $("#login div").css("visibility","hidden");
});