Toggle sliding in an open or closed direction indefinitely

Question

Toggle sliding in an open or closed direction indefinitely

Currently facing an issue where a menu should open/close on mobile devices. To achieve this, I have implemented an if-statement to check the browser width and execute a script accordingly:

$(window).resize(function() {
  var mobilewidth = $(window).width();
  if(mobilewidth < 873 ) {
    $(".mod_customcatalogfilter h2").click(function() {
      $(".filterform").slideToggle();
    });
  } else {
    $(".filterform").removeAttr("style");
  }
});

Although it is functional, the .filterform seems to be bouncing up and down before closing.

To see the issue in action, please visit: http://codepen.io/Sukrams/pen/WwjejP

If anyone has any insights as to why this behavior occurs, your input would be greatly appreciated.

jquery css

Answer 1

Answer №1

Each time the event is bound on resize, adding another actionListener without overriding the existing one. To improve performance, consider unbinding the event each time.

if(mobilewidth < 873 ) {
    $(".mod_customcatalogfilter h2").unbind();
    $(".mod_customcatalogfilter h2").click(function() {
        $(".filterform").slideToggle();
    });
} else {
    $(".mod_customcatalogfilter h2").unbind();
    $(".filterform").removeAttr("style");
}

A more efficient approach would be to cache variables and bind the event only once.

var $filter = $(".mod_customcatalogfilter h2");
var mobilewidth = $(window).width();
$filter.on('click', function() {
    if (mobilewidth < 873) {
      $(".filterform").slideToggle();
    } else {
      $(".filterform").removeAttr("style");
    }
});
$(window).resize(function() {
  mobilewidth = $(window).width();
});

Answer 2

Each time the event is bound on resize, adding another actionListener without overriding the existing one. To improve performance, consider unbinding the event each time.

if(mobilewidth < 873 ) {
    $(".mod_customcatalogfilter h2").unbind();
    $(".mod_customcatalogfilter h2").click(function() {
        $(".filterform").slideToggle();
    });
} else {
    $(".mod_customcatalogfilter h2").unbind();
    $(".filterform").removeAttr("style");
}

A more efficient approach would be to cache variables and bind the event only once.

var $filter = $(".mod_customcatalogfilter h2");
var mobilewidth = $(window).width();
$filter.on('click', function() {
    if (mobilewidth < 873) {
      $(".filterform").slideToggle();
    } else {
      $(".filterform").removeAttr("style");
    }
});
$(window).resize(function() {
  mobilewidth = $(window).width();
});

Answer 3

Answer №2

Whenever the window is resized, a new click event listener is generated. This means that each time you click, the event listeners will be triggered x times (as many times as the window has been resized under 873 pixels). Therefore, the solution should ensure that the event listener for click is not created multiple times.

One way to achieve this is -

var isEventListenerCreated = false;
$(window).resize(function() { 

    var mobilewidth = $(window).width();

    if(mobilewidth < 873 && !isEventListenerCreated) {
       isEventListenerCreated = true;
        $(".mod_customcatalogfilter h2").click(function() {
            $(".filterform").slideToggle();
        });
    } else {
        $(".filterform").removeAttr("style");
    }
    });

Another option is to remove the event listener each time the window is resized larger than 873 pixels.

Answer 4

Whenever the window is resized, a new click event listener is generated. This means that each time you click, the event listeners will be triggered x times (as many times as the window has been resized under 873 pixels). Therefore, the solution should ensure that the event listener for click is not created multiple times.

One way to achieve this is -

var isEventListenerCreated = false;
$(window).resize(function() { 

    var mobilewidth = $(window).width();

    if(mobilewidth < 873 && !isEventListenerCreated) {
       isEventListenerCreated = true;
        $(".mod_customcatalogfilter h2").click(function() {
            $(".filterform").slideToggle();
        });
    } else {
        $(".filterform").removeAttr("style");
    }
    });

Another option is to remove the event listener each time the window is resized larger than 873 pixels.

Toggle sliding in an open or closed direction indefinitely

Answer №1

Answer №2

Similar questions

The local webpage varies from the online version

Sending an Ajax POST request from a Node.js server

Building an accordion collapse feature in HTML using CSS and JavaScript

Incorporate CSS styling within a PHP document

Dynamic sliding effect in CSS for seamless showing and hiding of div elements

jquery line break in textarea

Is the OnClientUploadStart function failing to work correctly with the "UploadStart" attribute?

The issue with the table inside a bootstrap modal is that it is not properly sized and does

Using JavaScript to modify a JSON document

Change the selection so that only the initial one appears in gray

Leverage Bootstrap 4 for achieving flexible layouts and centering content with two elements using flex and justify-content

Div's HTML Classes are not triggering the Click Event

Issues surrounding the break function in PHP and Jquery

Processing ajax requests in Rails 4 using HTML format

Calculate the total sum of input values using jQuery

How can you align square cells within a container using CSS grids while maintaining a consistent grid gap?

What impact does the order of the element I'm specifying in my .css file have on its appearance after being rendered?

Bootstrap 4 Multilevel Navbar with Bootswatch design positioned on the right side

Choose-option "No entries found for that specific query"

Designing a customizable header/banner for user personalization