CODEWITHSUNDEEP
jqueryhtml
jijith
jijith

Reputation: 21

I want to hide text box when click out side

In my new project I would like to add a search box with expanding width when click on icon. I have created with that query width toggle but I need to hide the textbox when click outside too.

HTML:

<div class="search_box">
     <form>
        <i class="fa fa-search"></i>
        <input type="text" class="form-control">
     </form>
</div>

jQuery:

jQuery(document).ready(function(){
    jQuery('.search_box .fa-search').click(function(){
        jQuery('.search_box input').animate({width:'toggle'},500);

    });
});

Upvotes: 0

Views: 1358

Answers (2)

user4227915
user4227915

Reputation:

Try this code:

$(document).on("click", function(e){
    if( !$(".search_box").is(e.target) ){ 
    //if your box isn't the target of click, hide it
        $(".search_box").hide();
    }
});

To use with your textbox, just change $(".search_box") for your textbox. Hope it helps

Upvotes: 0

sideroxylon
sideroxylon

Reputation: 4416

Try this:

$('.search_box input').blur(function() {
   $(this).hide();
});

Upvotes: 1

Related Questions