CODEWITHSUNDEEP
jquerytoggle
user3636823
user3636823

Reputation: 55

Jquery Click Function -

I have a JS Fiddle, my question is after first click things are working fine, but if again click on H3, the newclass is not getting toggled.

thanks for the help in advance 

$('.recommendation-block > h3').addClass('newclass');
$('.recommended-product').addClass('hide');
$(document).ready(function () {
    $('.recommendation-block > h3').click(function () {
        $(this).next('.recommended-product').toggleClass('active');
        if ($('.recommended-product').hasClass('active')) {
            $(this).closest('.recommendation-block > h3').toggleClass('newclass1');
        }
    });
});

Upvotes: 2

Views: 66

Answers (2)

prava
prava

Reputation: 3986

$('.recommendation-block > h3').addClass('newclass');
$('.recommended-product').addClass('hide');
$(document).ready(function(){
    $('.recommendation-block > h3').click(function() {
        $(this).next('.recommended-product').toggleClass('active');
        $(this).toggleClass('newclass1');
    });
});

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388436

I think you need to use the version of toggleClass which takes a switch param, also you need to target the recommended-product which is in the current context.

$(document).ready(function () {
    $('.recommendation-block > h3').click(function () {
        var $prod = $(this).next('.recommended-product').toggleClass('active');
        $(this).closest('.recommendation-block > h3').toggleClass('newclass1', $prod.hasClass('active'));
    });
});

Demo: Fiddle

In your case, the if block is executed only in alternate clicks because the hasClass will return true only when the active class is added to the recommended-product

Upvotes: 1

Related Questions