If, Else; working. If, ElseIf; not working! Javascript

I made this simple function to control a pop up div. It works when If... Else is in place. The If... ElseIf set up I have written doesn't work though... The animation completely stops working...

Any ideas what the problem is? I have tried it in a few browsers, and the problem is the same...

This works...

( function( $ ) {
    $( function() {
        $(".chatWindowHeader").click(function() {
            if ($(".chatWindow").height() > 38 ) { 
                $(".chatWindow").animate( { "height" : "38px"}, 300, function(){});
            }
            else {  
                $(".chatWindow").animate({"height" : "400px"}, 300, function(){});
            }
        });
    });
})(jQuery);

This doesn't work...

( function( $ ) {
    $( function() {
        $(".chatWindowHeader").click(function() {
            if ($(".chatWindow").height() > 38 ) { 
                $(".chatWindow").animate( { "height" : "38px"}, 300, function(){});
            }
            else if ($(window).width() > 300) {  
                $(".chatWindow").animate({"height" : "650px"}, 300, function(){});
            }
            else if ($(window).width() < 300) {
                $(".chatWindow").animate({ "height" : "100px" }, 300, function(){});
            }
    });
    });
})(jQuery);