Click outside the element to hide it. I was always having difficulties with this, here's a nice tip. This depends on jQuery, just follow the same logic for any other framework or even vanilla JS.

clickOutsideHideEl.js

// change selectors as you need

var selector = '.selector';

$(document).ready(function() {

  $(selector).click(function(e) {
    $(selector).show();
    e.stopPropagation();
  });
  
  $('body').click(function(e) {
    if($(e.target).closest(selector).get(0) == null ) {
        $(selector).hide();
    }
  });

});