Jquery Slidetoggle() Not Working In Firefox, Works In Chrome

My code is this: jQuery('.cart-module .cart-heading').bind('click', function() { if (jQuery(this).hasClass('active')) { jQuery(this).removeClass('active'); } else {

Solution 1:

I had the same problem before, I haven't really understood why it happens but I found a workaround for it.

I am not sure if it will also work for you but what I did is I removed the display:none in the stylesheet and just added it inline in the html.

If anyone could explain the strange behavior it will really be helpful though.

Solution 2:

Add event.preventDefault(); and event.stopPropagation(); for this to work in all browsers including Firefox. See Snippet below:

jQuery('.cart-module .cart-heading').bind('click', function(e) {
    e.preventDefault();
    e.stopPropagation();
    if (jQuery(this).hasClass('active')) {
        jQuery(this).removeClass('active');
    } else {
        jQuery(this).addClass('active');
    }
 jQuery(this).parent().find('.cart-content').slideToggle('slow');
});

Solution 3:

Have you tried :

$(document).ready(function() {
   // put all your jQuery goodness in here.
 });