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.


<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'); ?>"> 


input[type="search"], input[type="subscribe"] {
    -webkit-appearance: textfield;
    -webkit-box-sizing: content-box;    
    outline: none;
    border: none;
    background: none;
    display: inline;
    width: 70px;
    -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;
  • You can use jQuery for that...
    – MidhuN
    Commented Jul 29, 2013 at 6:08

2 Answers 2


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] {

JQuery code:


  • Thanks for the help. That almost works, the only oddity is that, on the live site, clicking on Search does not hide Subscribe. If it helps, you can see it here, in the left sidebar: bit.ly/18MNOda
    – Andrew
    Commented Jul 29, 2013 at 13:50
  • It is happening as you are having same id more than once on single page. Please check your DOM and remove the inconsistency. The code will work then. Commented Jul 30, 2013 at 1:39

You can use the following



Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.