I have this accordion in my footer that should only run on mobile. When I have it run on desktop initially the function doesn't run, which is what I want. But if I switch to mobile view and then back to desktop, the function is still working... I'm still able to click the h5 and show/hide the text below... this shouldn't be happening on desktop though, I don't understand the issue..
Codepen so you can see the resize issue.
// On resize run the check screen size function
$(window).on("resize", function (e) {
checkScreenSize();
});
// Run the check screen size function on load
checkScreenSize();
// check screen size function
function checkScreenSize(){
var newWindowWidth = $(window).width();
// Run the accordion function on screens less than 1024
if (newWindowWidth < 1024) {
footerAccordion();
}
}
// Accordion function
function footerAccordion() {
$('.footer__locations p').hide();
$(".footer__locations").find("h5").click(function() {
$(".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');
}
});
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<footer class="footer">
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
<div class="row footer__locations-row">
<div class="col-lg-6 footer__locations">
<h5>TITLE TWO</h5>
<p>THIS IS SOME TEXT TWO</p>
</div>
<div class="col-lg-6 footer__locations">
<h5>TITLE TWO</h5>
<p>THIS IS SOME TEXT TWO</p>
</div>
</div>
</div>
</div>
</div>
</footer>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();
}
}
Make a reverse accordion function and
function reverseFooterAccordion() {
$('.footer__locations p').show();
$(".footer__locations").find("h5").off("click.namespace") // use namespaces to on and off click handler
}
call it on else condition
if (newWindowWidth < 1024) {
footerAccordion();
} else reverseFooterAccordion()
Proper implemented footerAccordion will look like
function footerAccordion() {
$('.footer__locations p').hide();
$(".footer__locations").find("h5").off("click.namespace").on("click.namespace",function() {
$(".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');
}
});
}
PS: Add debounce on resize listener for performance