// I searched but no luck, so I start a new question :)

I have:

`<a class="icon hide-text" id="btnNoti5" href="#">Notification</a>`

I want that: When I click on this `a`, it will show/hide a div and when I click outside that div, if it is visible, it hides.

I use this code to show/hide. It works fine:

```
var divNotifi = $('#divNotifi');
$('#btnNoti5').click(function(e) 
{
    if (divNotifi.is(":visible"))
    {           
        divNotifi.hide();
    }
    else 
    {         
        divNotifi.show();
    }
}

```

But when I add this code to hide the div when user click outside, it actually works, but above code stopped working: First click, it show the div. Second click: Nothing happens. The div wasn't hidden as expected.

```
$(document).mouseup(function (e)
{
    var container = $("#divNotifi");
    if (container.has(e.target).length == 0)
    {
        container.hide();
    }
});

```

Please help me. Thank you very much.