Closing drop down tab by clicking outside.

Please I need someone to help me with this. I've tried to fix it but not working as expected. I want to close a drop down tab by clicking both the tab button and outside the tab. I was able to open the drop down by clicking on the tab button and close it by clicking outside the tab, but I cannot close the tab by clicking on the tab button. Below are my codes:

HTML

<div id="notify" style="display:inline-block; cursor:pointer;">'.'<img id="note_still" src="images/note_still.png" width="31" height="30" alt="Notes">
<div id="notecontainer" class="notecontainer" style="display:none; border:solid 1px lightslategray; margin-top:2px;">';
<div id="notedisplay" class="notedisplay">'.$notify_result.'</div>';
<div id="spanBase" style="height:40px; width:300px; background-color:gray; text-align:center;"><a style="color:white; font-weight:800;" href="">View all notifications</a></div>
</div>
</div>

JavaScript/JQuery

//**********Function for notification drop-down menu*******//

$(document).ready(function() {
    $("#notify").click(function() {
        $("#notecontainer").show();
    });
});
// Close the dropdown menu if the user clicks outside of it
window.addEventListener('mouseup', function(event) {
    var box = document.getElementById('notecontainer');
    if (event.target != box && event.target.parentNode != box) {
        box.style.display = 'none';
    }
});
//***************Ends Here*********************************//

I tried to add another jquery to hide the dropdown on clicking the tab icon(

img id="note_still" src="images/note_still.png"

but the dropdown refused to even open up when I applied the script.