CODEWITHSUNDEEP
javascriptjquery
Pawan Kalyan
Pawan Kalyan

Reputation: 581

jquery .show() and .hide() not working..!

In the below code the jquery show and jQuery hide functions are not working.. Though this is the basic thing ,i couldn't get through this for the past 1 hour.. I am unable to hide and show the div... PLease help

<!DOCTYPE html>
<html>
<head>
    <title>sample</title>


    <script type="text/javascript" src="jquery-1.9.1.min.js"></script>

    <script type="text/javascript">

             $(document).ready(function(){



            var fieldExample = $('#myTags');


            fieldExample.focus(function() {
                var div = $('div#showDiv').show();
                $(document).bind('focusin#showDiv click#showDiv',function(e) {
                    if ($(e.target).closest('#showDiv, #myTags').length) return;
                    $(document).unbind('#showDiv');
                    div.fadeOut('medium');
                });
            });
        $('div#showDiv').hide();

             })

    </script>
</head>
<body>
<input id="myTags"/>

  <div id="showDiv" style="height:200px;width:200px;background-color:red;"></div>
</body>
</html>

Upvotes: 0

Views: 151

Answers (2)

Arun P Johny
Arun P Johny

Reputation: 388316

Try

$(document).ready(function () {
    var $field = $('#myTags'),
        $div = $('.showDiv').hide();

    $field.focus(function () {
        $div.show();
    });
    $(document).on('focusin click', function (e) {
        if ($(e.target).closest('.showDiv, #myTags').length) return;
        $div.fadeOut('medium');
    });

})

Demo: Fiddle

Upvotes: 2

Rituraj ratan
Rituraj ratan

Reputation: 10378

use following code

<script type="text/javascript">

         $(document).ready(function(){



        var fieldExample = $('#myTags');


        fieldExample.focus(function() {
            var div = $('div#showDiv');
             div.show(); //show div
            $(document).on('focusin,click','#showDiv',function(e) {
                if ($(this).closest(' #myTags').length) return;

                $('#showDiv').off('focusin,click');
                div.fadeOut('medium');
            });
        });
    $('div#showDiv').hide();

         })

</script>

reference on

Upvotes: 0

Related Questions