Hide dropdown on body click...

Question

I have a search box on my website, which slides out when the search button is clicked.
As of now, the only way of disappearing the search box, is by clicking on the search button as well. I would like this to disappear on any click of the body (outside the search box) as well.  How can I do this?
Here is my JS code:
/-> start: SEARCH BUTTON DROPDOWN */
  $('.search-button-main').click(function() {
    animationSpeed=250;
    if($(".search-button-main").hasClass("active")) {
      $('.search-dropdown-menu').animate({ height:'40px'},animationSpeed,function(){
        $('.search-dropdown-menu').animate({ width:'0'},animationSpeed,function(){
          $(".search-button-main").removeClass("active");
        });
      }); 
    } else {
      $('.search-dropdown-menu').animate({ width:'350px'},animationSpeed,function() {
        $('.search-dropdown-menu').animate({ height:'450px'},animationSpeed,function() {
          $(".search-button-main").addClass("active");
          $(".filterEvents").focus();
        });
      }); 
    }
  });
/ end.

Steven Parker · Accepted Answer

Without seeing the HTML this works on I can't be specific; but what comes to mind would be to establish a delegated handler on the document or window to allow you to respond to clicks elsewhere.
Since you're using jQuery, you might be able to use the ".on" method with the optional "selector" argument in setting this up.

Welcome to the Treehouse Community

Looking to learn something new?

Andres Ramirez

Andres Ramirez

Hide dropdown on body click...

1 Answer

Steven Parker

Steven Parker

Andres Ramirez

Andres Ramirez

Steven Parker

Steven Parker