IF statement only works in debugger and is otherway around without

I am trying to create a collapsable menu. This is the code I use:

 $('.fa-bars').click(function () {
    console.log("clicked");
    if ($('#sidebar > ul').is(":visible") === true) {
        console.log("True");
        $('#main-content').css({
            'margin-left': '0px'
        });
        $('#sidebar').css({
            'margin-left': '-210px'
        });
        $('#sidebar > ul').hide();
        $("#container").addClass("sidebar-closed");
    } else {
        console.log("False");
        $('#main-content').css({
            'margin-left': '210px'
        });
        $('#sidebar > ul').show();
        $('#sidebar').css({
            'margin-left': '0'
        });
        $("#container").removeClass("sidebar-closed");
    }
});

However it only seems to work in debugger mode, when I run it normally it gives me false if it needs to be true and the otherway around. I now solved it by replacing === True with === False but that doesn't seem right. I am 100% sure this code works in the standard template, but I adapted some other things on the template and now the script show this backwards behaviour.

Even when I do:

if ($('#sidebar > ul').is(":visible")) { it still gives me false even if it is supposed to be true.