Why is this function still running on desktop?
The issue is that you're assigning the Click action and never removing it. One work-around is just to embrace that - put your mobile check in the click handler. Then use CSS to handle the hiding/showing of the p element.
function IsMobileScreenSize(){
var newWindowWidth = $(window).width();
// true if screens less than 1024
if (newWindowWidth < 1024) {
return true;
}
return false;
}
// $('.footer__locations p').hide(); // Handle UI in CSS instead
// Accordion function just set it always
$(".footer__locations").find("h5").click(function() {
// Only do for larger screen sizes, otherwise just stop here
if ( ! IsMobileScreenSize() )
return;
$(".footer__locations").find("h5").removeClass('active');
$('.footer__locations p').slideUp();
var selected = $(this).next('.footer__locations p');
if (selected.is(":hidden")) {
$(this).next('.footer__locations p').slideDown();
$(this).toggleClass('active');
}
});
Finally, your checkScreenSize function will look like below
function checkScreenSize(){
if (IsMobileScreenSize()) {
$('.footer__locations p').hide();
} else {
$('.footer__locations p').show();
}
}