Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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;
}
share|improve this question
    
You can use jQuery for that... –  MidhuN Jul 29 '13 at 6:08
add comment

2 Answers 2

up vote 0 down vote accepted

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();
    });
})
share|improve this answer
    
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 Jul 29 '13 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. –  Rohit Pande Jul 30 '13 at 1:39
    
Sorry! Thanks for pointing that out. –  Andrew Jul 30 '13 at 14:20
add comment

You can use the following

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

});
share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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