If you’ve ever dealt with menus that open on click, but want them to close when a user clicks outside the menu area, here’s a pretty simple way to do it. I add an event listener to the document’s body. When someone clicks it, we look for the event’s target id. If it matches the ID of the box’s div, then do nothing. If it doesn’t, close the menu.
Taking that a little further, it is inefficient to leave a click event listener on the entire body when it is not being used. In this case, if the menu hasn’t been opened yet, there’s no reason to listen for a click outside of the menu. Add the event listener in the callback of the div being shown. In that same vein, when the div is being hidden again, remove the event listener.
Also make sure you include jQuery as some of the functionality above uses the library.