mouseleave / mouseout to hide div?

Question

I'm using the following to initially hide the div on pageload and then toggle the hide show states.

$(function() {
  $('#playlist_wrapper').hide();  
  $('#toggle_playlist').click(function() {
    $('#playlist_wrapper').slideToggle(400);
    return false;
  });
});

I'd like to make it possible to also hide the div (when visible) by clicking anywhere else on the page outside the #playlist_wrapper div.

I know it's done with 'mouseleave' in Jquery or 'mouseout' in plain JS but I just don't know how to implement it here.

Any help would be appreciated.

Cheers!

This does make no sense, if you already have a `mouseleave` to hide your element than a *"click anywhere else on the page"* makes no more sense. — Roko C. Buljan, Jun 08 '13 at 13:53

score 0 · Answer 1 · answered Jun 08 '13 at 14:03

You can do it like this.

$(document).ready(function() {
  $("body").click(function(event) {
    if (event.target.id != "playlist_wrapper") {
      //The user clicked outside the playlist_wrapper
      //Here you can hide / show the div.
    }
  });
});

mouseleave / mouseout to hide div?

1 Answers1