Hide a div if input is not focused

Question

I am trying to hide a div using

if ($("input,textarea").is(":focus")) {
    $("#logos").hide();
} else {
    $("#logos").show();
}    

I have also tried

if ($("#input").is(":focus")) { }

and giving the input id of "input", but it seems to not work. It's supposed to work like in mobile google search.

What am I missing here?

Answer 1

You're probably missing an event handler

$("input,textarea").on({
    focus : function() {
        $("#logos").hide();
    },
    blur : function() {
        $("#logos").show();
    }
});

Answer 2

Here is a working example, using the jQuery methods

• show()
• hide()
• focus()
• blur()

 $(document).ready(function(){ $('.logos').hide(); $('.focus').focus(function(){ $('.logos').show(); }); $('.focus').blur(function(){ $('.logos').hide(); }); }); 

 div, textarea { position: absolute; width: 100px; height: 100px; vertical-align: top; } .logos { top: 0; left: 0; color: rgb(255,255,255); background-color: rgb(255,0,0); } .focus { top: 0; left: 112px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="logos"> #logos </div> <textarea class="focus"> Focus on me </textarea>