fadeOut po kliknięciu poza danym elementem

Witam.

Stworzyłem pewnego diva który pokazuje się po kliknięciu w odpowiedni przycisk (użyłem do tego jquery: fadeIn).
Co powinienem zrobić aby funkcja fadeOut ponownie ukryla diva się za każdym razem gdy:

1. Kliknę ponownie w przycisk
2. Kliknę w dowolne miejsce poza rozwijanym menu.

 	
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
	<script>
	$(document).ready(function(){
	    $("#rozwijany_kontener_menu").click(function(){
	        $("#zawartosc_menu").fadeIn(500);

	    });
	});
</script>

Określenie takiego efektu (zmiany pomiędzy stanem A i B) to toggle. W tym wypadku jest metoda fadeToggle. Jest równieź toggleClass, samo toggle itd.

Natomiast jak zrobić, żeby po kliknięciu poza div element się schował? Jest to świetny moment, żeby nauczyć się wyciągać taki kod ze stron gdzie już to działa, np. facebook lub 4programmers. Tutaj Ci nagrałem jak tego dokonać (plik wystarczy przeciągnąć na chrome - nie wiem czemu jing ma taki format...) . Ogólnie polecam zainteresować się jakie rzeczy ma chrome dev tools :)

Dzięki za super wskazówkę! Udało się :)

Hakiery hakiery