Как показать/скрыть элемент по клику на элемент и вне его?

Добрый день.
Есть код
------
html

------
js
$(document).ready(function(){
jQuery('.blog-img .overlay').on(click(function(){
jQuery(this).toggleClass("test");
});
}); для показа и скрытия если click был непосредственно на элементе

$(document).mouseup(function (e){
var div = jQuery('.overlay');
var buton=jQuery('this');
if (!buton.is(e.target) && buton.has(e.target).length === 0) {
div.removeClass('test');
}
}); для скрытия элемента, если click был не по нему.

-----------------
css
.test{
opacity:1;
z-index:500;
}
.overlay{
z-index:100;
opacity:0
}
Помогите пожалуйста сделать так, чтобы при клике на элемент он появлялся, при повторном клике на него или вне его области отображения чтобы он исчезал.