CODEWITHSUNDEEP
javascriptjquery
wsfuller
wsfuller

Reputation: 1840

jQuery Event Duplicating function

The issue I'm having is every time you resize the browser a function is called, that function will make a side panel into an accordion if the screen width is a certain number or below or on a larger screen it's just displaying like an open side panel with no interaction.

In the resize event I call the sidepanel function. Unfortunately every time I resize the browser my side panel function is duplicated. I've been seeing stuff on unbinding but nothing that seems to make sense for how I'm calling the side panel function.

Is there a way in the resize.js to unbind the sidepanel function and rebind to the window so it's only called once every time the window is resized?

Resize.js

$(document).ready(function() {
    var resizeTimer;
    $(window).on('resize', function() {
        clearTimeout(resizeTimer);
        resizeTimer = setTimeout(function() {
            sidePanelAccordion();
        }, 250);
    });
});

Side-panel.js

function sidePanelAccordion() {

    var panelAccordion = $('.side-panel-accordion');
    var panelHeader = $('.side-panel-header');
    var panelBody = $('.side-panel-body');
    var panelHeaderActive = $('.mobile-header-active');

    if (userScreen.type === 'mobile') {
        panelAccordion.find(panelBody).hide();
        panelAccordion.find(panelHeader).addClass('mobile-header-active');
    } else if (userScreen.type === 'desktop') {
        panelAccordion.find(panelBody).show().removeClass('open');
        panelHeader.removeClass('mobile-header-active');
    }

    panelHeaderActive.on('click', function(e) {
        console.log('clicked');
        if (panelBody.hasClass('open')) {
            panelBody.removeClass('open').stop(true, true).slideUp().clearQueue();
            //console.log('panel had class open');

            e.stopPropagation();
            return false;
        } else {
            panelBody.addClass('open').stop(true, true).slideDown().clearQueue();
            //console.log('panel now has class open');
            e.stopPropagation();
            return false;
        }
    });
}

Upvotes: 3

Views: 45

Answers (1)

Dmitriy
Dmitriy

Reputation: 3765

Try this code:

panelHeaderActive.unbind('click').on('click', function(e){
     console.log('clicked');
     if (panelBody.hasClass('open')) {
          panelBody.removeClass('open').stop(true,true).slideUp().clearQueue();
          //console.log('panel had class open');

          e.stopPropagation();
          return false;
     } else {
          panelBody.addClass('open').stop(true,true).slideDown().clearQueue();
          //console.log('panel now has class open');
          e.stopPropagation();
          return false;
     } 
});

Upvotes: 3

Related Questions