Hide input field when second input field is in focus

Question

I'm trying to create a sidebar where there are two inputs side by side: Search|Subscribe. When the user clicks on one input (Search, for example), I want the second (Subscribe) to disappear so the other input can grow to fill the space. My guess is that this is not possible with pure CSS, so will it require jQuery? If it does require jQeury, does anyone have any tips on the basics for what's needed to flip between the two fields? I know next to nothing about jQuery.

The CSS already grows the fields to fill the width, I just need to figure out how to display:none for the non-selected field. Thanks in advance for any help.

Inputs:

<form role="search" method="get" id="searchform" action="<?php echo home_url('/'); ?>">
    <div class="row collapse">
        <div class="small-12 columns">
            <input type="subscribe" value="" name="subscribe" id="subscribe" placeholder="<?php _e('SUBSCRIBE', 'reverie'); ?>"> <input type="search" value="" name="s" id="s" placeholder="<?php _e('SEARCH', 'reverie'); ?>"> 
        </div>
    </div>
</form>

CSS:

input[type="search"], input[type="subscribe"] {
    -webkit-appearance: textfield;
    -webkit-box-sizing: content-box;    
    outline: none;
    border: none;
    background: none;
    display: inline;
    width: 70px;
    font-size:14px;
    font-weight:500;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    transition: all .5s;
}

input[type=search]:focus, input[type=subscribe]:focus {
    border-bottom: 3px solid #bcbbab;
    width: 100%;
    background: none;
}

Answer 1

This question is out of scope here. You should try stackoverflow for this question.

Though I would like to answer your question.

You need to use some CSS as well as JQuery for getting the desired result.

See the working fiddle here.

Hope this works for you.

CSS addition:

input[type=subscribe]:focus + input[type=search] {
    display:none;
}

JQuery code:

$(function(){
    $("#s").focus(function(){
    $("#subscribe").hide();
    });

    $("#s").focusout(function(){
    $("#subscribe").show();
    });
})

Answer 2

You can use the following

jQuery('input[type="search"]').focus(function(){
   jQuery('input[type="subscribe"]').hide();

});