title: How to hide and show element in Javascript/jQuery on keydown OR click?
body: <p>I am trying to hide and show an input box with keydown event but I couldn't figure out how to do the same if clicked outside the input box.</p>
  
  <p>HTML:</p>
  
  <pre><code>        &lt;header&gt;
          &lt;h1&gt;Hello {{visitorInput}}!&lt;/h1&gt;
          &lt;h4 id="greet"&gt;Nice to see you :)&lt;/h4&gt;
          &lt;form action="#"&gt;
              &lt;input type="text" ng-model="visitorInput" id="visitorInput" placeholder="Please enter your name and press Enter."&gt;
          &lt;/form&gt;
      &lt;/header&gt;
  </code></pre>
  
  <p>Javascript/jQuery:</p>
  
  <pre><code>var visitorInput = document.getElementById("visitorInput");
  
  $('#visitorInput').focus();
  
      $('#visitorInput').keydown(function( event ){
          if(event.which == 13){
                  $("#greet").show();
                  console.log('Visitor name is: ' + visitorInput.value);
                  //alert('Visitor name is: ' + visitorInput.value);
                  $("#visitorInput").hide();
                      $('#greet, h1').click(function(){
                          $('#visitorInput').show().focus();
                          $('#greet').hide();
                      });
          };
      });
  </code></pre>