CODEWITHSUNDEEP
javascript
Robert Taylor
Robert Taylor

Reputation: 59

show/hide div on html form focus and blur?

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

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?

Can someone please show me where I'm going wrong? thanks

<script>
    $(".infobox-profile").hide();

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

    <div class="infobox-profile">hello</div>

Upvotes: 1

Views: 2825

Answers (2)

Ed T.
Ed T.

Reputation: 1039

Personally, I would not hide it on load using JS, you could just add display: none; property to .infobox-profile in your css. and like bikeshedder said. put your code inside $(function(){ INHERE });

Upvotes: 0

bikeshedder
bikeshedder

Reputation: 7487

Put your code into $(function() { ... }

<script>
$(function() {
    $(".infobox-profile").hide();

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

Your JavaScript is probably executed before the infobox-profile is part of the DOM.

Working example

http://jsfiddle.net/bikeshedder/KxMcy/

Upvotes: 2

Related Questions