Issue with Show / Hide div - When clicking outside div to hide it, you need to click twice to show it again

Question

I've seen dozens of questions similar to this one, and I've thoroughly searched the database, but I can't find one that is identical to my issue.

The show / hide div (toggle) search button works perfect, and so does "hide div when clicking outside of it"

The problem is that if you click on the show button again, it doesn't react, you have to click on the search button twice to open the div again.

This only happens if you close the div by clicking outside of it, and then try to open it again by clicking on the search button.

I have a feeling that the issue is due to calling the same functions more than once.. but not sure, any help would be appreciated! :-)

jQuery code I used:

//Open close search div 


   $("#search-form-test").toggle( 

   function(){

   $(".alias-search-form").show(800);
   },

   function(){
   $(".alias-search-form").hide(800);

   }
   );


//Close search area when clicking outside of it

   $(".block-type-content").click( 

   function(){

   $(".alias-search-form").hide(800);

   }

   );

Answer 1

For consistent behaviour, instead of registering for the toggle event, register for the click event and use toggle() instead of show/hide methods to toggle the visibility.

// HIDE SHOW SEARCH 
$("#search-form-test").click(function(e) {
    e.preventDefault(); //To prevent default anchor tag behaviour
    e.stopPropagation(); //To prevent parent container click event from firing

    $(".alias-search-form").toggle(800);
});

$(".block-type-content").click(function() {
    $(".alias-search-form").hide(800);
});