title: Hide div when input is clicked
body: <p>I wrote a line where if an input is clicked it hides a div. The div is a static utility nav bar that caused an issue with Android's native keyboard. here is the code but the issue is it runs 9 sometimes 10 times and my back end developer says it will be a performance issue. What can i do to prevent this from happening? I am new to javaScript and jQuery so getting this far is good for me.</p>
  
  <pre><code>    function utilityNav() {
    if($(window).width() &lt; 891) {
    //Utility Mobile Nav background-color
    var div = $('.navbar-static-bottom').show();
    $('input').focus(function() {
       $('.navbar-static-bottom').fadeOut();
       $("."+$(this).attr('input')).fadeIn();
    });
  
    $('input').blur(function() {
       $('.navbar-static-bottom').fadeIn();
    });
    }
  }
  utilityNav();
  $(window).on('resize', utilityNav);
  $('input').blur(utilityNav);
  </code></pre>