show/hide div on html form focus and blur?
<p>I'm trying to show a div when a user clicks on the html form input 'text' (on focus) and then hide on blur.</p>

<p>It works but for some reason the div is showing before the user even clicks on the text input field. I'm trying to get it to show only once the user has focused on the text field, and hide when they click out of it?</p>

<p>Can someone please show me where I'm going wrong? thanks</p>

<p>
    
    
        </p>

<pre><code>&lt;script&gt;
    $(".infobox-profile").hide();

    $("#text").focusin(function() {
        $(".infobox-profile").show();
    }).focusout(function () {
        $(".infobox-profile").hide();
    });
    &lt;/script&gt;

    &lt;div class="infobox-profile"&gt;hello&lt;/div&gt;
</code></pre>
