There is an input with the class .search_input . How to show a block with focus on input , and hide, if the focus is not on input 'e?

    1 answer 1

    It is necessary in the event handler of the focus event , to show the desired element, and in the event handler for the blur event - to hide

    For example:

     $('input').focus(function(){$('#block').show();}) .blur(function(){$('#block').hide();}); 
     #block { display: none; } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" class="search" /> <div id="block">block</div>

    Option without scripts with a single css, and a simple layout

     #block { display: none; } .search:focus + #block { display: block; } 
     <input type="text" class="search" /> <div id="block">block</div>

    • The same can be done on css, why does the author want jquery? - Mr. Black
    • @Doofy, this question is better for the author to address - Grundy
    • @Doofy, added an example with css, but with a complex layout, when you need to show an element not adjacent or internal, the css version is either very difficult to implement or not yet possible - Grundy
    • @Grundy, I thought about the impossibility of reaching the element - Mr. Black
    • jquery in the example with css clean) - Mr. Black