Jquery responsive

im trying to create a responsive webpage. on mobile layout I want sections to be able to collaps and open and on desktop layouts I want it to remain open. with Js I made the selected Divs slide open or close. i wrote an if statement to allow the collapsing and opening only if the screen is less than 500px. and initially when the page loads everything is fine. however when I resize the page and go from destop to mobile or from mobile to desktop, it retains the functionality of the original setup. What am I doing wrong?

$(document).ready(function (){ $("#phone, #fax").mask("999-999-9999"); // $(".collapsForm").focus().show();

//assigning window width value to var $screenSize // This will fire when document is ready: var $initialSize = $(window).width(); var $screenSize = $(window).width(); // This will fire each time the window is resized: $(window).resize(function(){ $screenSize = $(window).width(); }); /------------------end of $screenSize assignment--------------/ function defaultCollaps(){ $(".collapsForm").hide(); } function nextEvent() { if($screenSize < 500){$(".next-button").click(function(){ $(this).parents(".collapsForm").slideUp("slow"); $(this).parents(".collapsForm").next().next().slideDown("slow"); }); } }

function collapsToggle() { if($screenSize < 500){ $( ".secHeader" ).click(function() { $(this).next( ".collapsForm" ).slideToggle( "slow" ); }); } }

collapsToggle() nextEvent() });