jquery - jqueryを使用したウィンドウのサイズ変更の問題

Question

下の画像を
ご覧ください https://dl.dropboxusercontent.com/u/36614618/Doubts/onlineChatImg.jpg
「画像 01」の上の画像では、html ドキュメントの右側に onlineChat div があります。オンライン チャット div にカーソルを合わせると、検索入力が見つかり、オンライン チャット ボタン '|>' がオンライン チャットの下部に非表示になります。上の画像「画像02」をご覧ください。非表示ボタン '|>' をクリックすると、onlinechat div で 'Image 03' が非表示になります。onlinechat div が非表示になるとすぐに、別のアイコンが表示され、onlinechat が再び「|<」として表示されます。今までは正常に動作しています。
しかし問題は、ウィンドウのサイズを変更すると、Onlinechat Div が自動的に表示されることです。私が探しているのは、ウィンドウのサイズ変更中にオンラインチャットが非表示になっている場合、
上記の概念は、Facebook のオンライン チャットと多少同じです

$('#onlineFriendsSearchShow').hide();// Default Search input is hide.

$('#OnlineChathideShowIcon').on('click',function(){ //When clicked on '|>' button, onlineChat div hide and left part div gets width of 100%.
    $('#rapMusicSocialNetworkRightPart').hide();//onlineChat div getting hide.
    $('#rapMusicSocialNetworkLeftPartWrapper').css('width','100%'); //Left part gets width of 100%.
    $('#onlineFriendsSearchShow').show();//show button '|<' gets displayed.
});

$('#onlineFriendsSearchShow').bind('click',function(){ //When clicked on '|<' show button. (to get right onlineChat div back).
    $(this).hide();//'|<' button hide.
    $('#onlineFriendsSearch').show();//search input show.
    $('#rapMusicSocialNetworkRightPart').show();//onlineChat div show.

    var widthRap = $(window).width()-201;//created variable having mainWindow width - onlineChat Div width.
    $('#rapMusicSocialNetworkLeftPartWrapper').css('width',widthRap);//variable value assigning to left part, so left and right divs get's adjusted within document.
});