How to hide and show element in Javascript/jQuery on keydown OR click?
<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>