My code is this:

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

    jQuery(this).parent().find('.cart-content').slideToggle('slow');
});
//--></script> 

You can test it for yourself by quickly adding a product to your cart like this and going to the shopping cart here .

When you click "Estimate Shipping & Taxes," it should display the DIV underneath of it. However, it only works in Chrome and not in Firefox. What can I do to fix this?

Thanks.

My code is this:

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

    jQuery(this).parent().find('.cart-content').slideToggle('slow');
});
//--></script> 

You can test it for yourself by quickly adding a product to your cart like this https://muddydogcoffee./teas/176-organic-crimson-berry-fruit-tisane?device=iphone and going to the shopping cart here https://muddydogcoffee./shopping-cart.

When you click "Estimate Shipping & Taxes," it should display the DIV underneath of it. However, it only works in Chrome and not in Firefox. What can I do to fix this?

Thanks.

• javascript
• jquery
• firefox
• google-chrome

3 Answers 3

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.

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');
});

Have you tried :

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