Collapsing 2 divs instead of 1 Jquery

107
February 18, 2018, at 1:49 PM

I have a button that call a div depending if a cart is full or empty

<a class="basket-btn btnCollapse basket-desk" type="button" title="VIEW SHOPPING BAG" onclick="minicart.noactive(this);" id="bag-customer">
    <span id="header-cart-item-count" 
    data-cart-count="<?php echo $numCartItems ? $numCartItems : 0; ?>">
        [<?php echo $numCartItems ? $numCartItems : 0; ?>]
    </span>
</a>

the div's are below:

<div class="row row-links collapse" id="rowSBag" >
            <?php $this->renderPartial('//partial/shop_bag_header'); ?>
</div>
<div class="row row-links collapse" id="rowSBagEmpty">
            <?php $this->renderPartial('//partial/empty_shop_bag_header'); ?>
</div>

The problem is that if a clicked in the button when the bag is empty show the correct div rowSBagEmpty but if I clicked in the button (bag empty) then I add a product, my script show me both div's rowSBagEmpty and rowSBag and not the last one.

My script is below:

var minicart = {
    init: function() {
        var count = $('#header-cart-item-count').data('cart-count');
        minicart.show(count);
    },
    show: function(products) {
        if (products > 0) {
            $('#header-cart-item-count').parent().attr('data-target', '#rowSBag');
        } else {
            $('#header-cart-item-count').parent().attr('data-target', '#rowSBagEmpty');
        }
    },
    noactive: function(button) {
        setTimeout(function() {
            $(button).removeClass('active');
        }, 1);
    },
    expand: function() {
        $.get('/cart')
            .done(function(page) {
                var content = $(page).find('#rowSBag').html();
                $('#rowSBag').html(content);
                var parent = $('#header-cart-item-count').parent();
                $('#rowSBagEmpty').remove();
                $(parent).trigger('click');
                $('#rowSBag .info').css('display','none');
                $('#AddToCart').attr('disabled', false).removeClass('btnSecondary').html('Agregar al carrito');
                $('#addedtobag_ok').fadeIn();
                setTimeout(function() {
                    $('#rowSBagEmpty').remove();
                    $('#rowSBag').collapse('toggle');
                }, 2000);
            });
    }
};
$(document).ready(function() {
    minicart.init();
}); 

I was tried removing the div BagEmpty but if i do this, the div rowSBag just only show but not hide with the timeout

Answer 1

You are just showing div, not hiding any. So I think if you add 'hide' function as well it will work.

        var minicart = {
        init: function() {
            var count = $('#header-cart-item-count').data('cart-count');
            minicart.show(count);
        },
        hide: function(products) {
            if (products > 0) {
                $('#header-cart-item-count').parent().attr('data-target', '#rowSBagEmpty');
            } else {            
                $('#header-cart-item-count').parent().attr('data-target', '#rowSBag');
            }
        },    
        show: function(products) {
            if (products > 0) {
                $('#header-cart-item-count').parent().attr('data-target', '#rowSBag');
            } else {
                $('#header-cart-item-count').parent().attr('data-target', '#rowSBagEmpty');
            }
        },
        noactive: function(button) {
            setTimeout(function() {
                $(button).removeClass('active');
            }, 1);
        },
        expand: function() {
            $.get('/cart')
                .done(function(page) {
                    var content = $(page).find('#rowSBag').html();
                    $('#rowSBag').html(content);
                    var parent = $('#header-cart-item-count').parent();
                    $('#rowSBagEmpty').remove();
                    $(parent).trigger('click');
                    $('#rowSBag .info').css('display','none');
                    $('#AddToCart').attr('disabled', false).removeClass('btnSecondary').html('Agregar al carrito');
                    $('#addedtobag_ok').fadeIn();
                    setTimeout(function() {
                        $('#rowSBagEmpty').remove();
                        $('#rowSBag').collapse('toggle');
                    }, 2000);
                });
        }
    };
READ ALSO
Associating an independent ajax request to a targeted element with the same group class name in JQUERY

Associating an independent ajax request to a targeted element with the same group class name in JQUERY

When I press any of the buttons that have the same class name they all activate the same AJAX request so how can I activate a request independently for a particular button that has the same class

88
Retrieve files with jQuery and transcrypt

Retrieve files with jQuery and transcrypt

I am having problems to get jQuery to work with transcryptHere is my code

145
Database row is not deleting, AJAX, PHP error

Database row is not deleting, AJAX, PHP error

I want to remove DB row data from HTML tableI have an HTML table where I have called all the database table values

118
Modify svg rect ID with image

Modify svg rect ID with image

I am in the process of making an interactive clock where the user clicks to add their own image on but I have become a bit stuck and even after a couple of hours trying all sorts of things I still cannot figure it out so hopefully someone can help me or point me in the right directionI...

120