How do I stop resize function from firing after a css value has changed?

Question

I'm trying to stop a resize function from firing after a css value has changed via a CSS media query. This doesn't work ... I want "there IS a toggle" to appear only once. how do I kill it?

$(window).bind('resize', function(event) {
    if ($('#toggle').css('display') == 'none')
        {
            console.log("there's no toggle!");
        }
        else {
            console.log("there IS a toggle!");
            return false; // trying to stop the function
        }
});

Answer 1

It should be written like this, Using .on() and .off().

$(window).on('resize', function() {

if ($('#toggle').css('display') == 'none')
    {
        console.log("there's no toggle!");
    }
    else {
        console.log("there IS a toggle!");
        $(window).off('resize');
    }
});