How to hide and show other elements upon focus on another elements like Stackoverflow.com's search bar?

I'm making a site where the size of input boxes for Name and Email is not engouh because of the design

So I want to know how to hide other 开发者_高级运维elements of :focus and get back again after out of focus

Like this

I want to do for both Mouse and Keyboard focus

Edit

I saw the same effect which I want in Seach bar of Stackoverflow.com

How they are doing?

http://jsfiddle.net/tBQpB/6/

in pure css:

.wrapper{
    width:400px;
    position:relative
}
input{
    position:relative;
    z-index:1;
}
input:focus{
    position:absolute;
    z-index:2;
    width:400px;
    float:left;
    left:0px
}

and the html:

<div class="wrapper">
        <input type="text" id="name" name="name" />

        <input type="text" id="email" name="email" />
</div>

I wrote some code in jsFiddle for this problem...

Check it out: http://jsfiddle.net/ycdrR/1/

update: http://jsfiddle.net/ycdrR/4/

you can try something in javascript like

$("input").focus(function()
                 {
                     var currentSelectedInput=this;

                     $("input").each(function()
                                     {
                                     if(this!=currentSelectedInput)
                                         $(this).parent().hide();
                                     });
                     $(this).css("width","100%");
                 });

$("input").blur(function(){
    $("input").each(function()
                                     {
                                         if($(this).parent().is(":visible")){
                                             $(this).css("width","auto");
                                         }
                                         else{
                                         $(this).parent().show();
                                         }
                                     });
                 });

used jquery for the above and the markup is as follows:

<div style="width="500px">
<div id="name" style="float:left">

    Name:
    <input  type="textbox" />
        </div>
    <div id="email" style="right">      
Email:
            <input type="textbox" />
    </div>
</div>