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