so I wanted to make a button that when you click it it looks depressed and when you click it again it doesn't anymore. Though I also wanted that, if you click anywhere outside of the button it ALSO doesn't look depressed anymore.

Here's my JavaScript code so far:

```css
if($('#taskbar-start').hasClass('taskbar-start-active') === false){
    $('#taskbar-start').click(function() {
        alert($('#taskbar-start').hasClass('taskbar-start-active'))
        $(this).toggleClass('taskbar-start-active');
        $(this).children().toggleClass('taskbar-start-frame-active');
    });
}
$(document).mouseup(function() {
    if($('#taskbar-start').hasClass('taskbar-start-active')){
        alert($('#taskbar-start').hasClass('taskbar-start-active'))
        $('#taskbar-start').removeClass('taskbar-start-active');
        $('#taskbar-start-frame').removeClass('taskbar-start-frame-active');
    }   
});

```

With that code the button gets depressed when I click it and undepressed when I click anywhere else, but if I click on the depressed button it gets undepressed for a moment and then depressed again (with the alerts, without the alerts it just stays depressed).

I've been researching and trying for a few hours now, I can't seem to find my issue. Sorry if the question is stupid, I'm still new to JavaScript/jQuery and still learning.