CODEWITHSUNDEEP
javascriptjquerytoggle
Beep
Beep

Reputation: 2823

toggle class on and off jquery

How would I toggle class on and off if click on different click ?

I have two clicks and have a class toggled on click, however if i click no 2 no 1 still has the class active.

$('.show-15').on('click', function () {
    if (clicks < 0) {
        clicks = 0
    }
    $(this).toggleClass('active-post');
    cards.slice(clicks, cards.length).fadeOut();
    cards.slice(0, 15).fadeIn();
});

$('.show-25').on('click', function () {
    if (clicks < 0) {
        clicks = 0
    }
    $(this).toggleClass('active-post');
    cards.slice(clicks, cards.length).fadeOut();
    cards.slice(0, 25).fadeIn();
});

Upvotes: 1

Views: 79

Answers (2)

Kunal Raut
Kunal Raut

Reputation: 2584

You can use the toggle() event as

$(".show-15").toggle(
    function(){
        if (clicks < 0) {
            clicks = 0
        }
        $(this).toggleClass('active-post');
        cards.slice(clicks, cards.length).fadeOut();
        cards.slice(0, 15).fadeIn();},

        function(){
        if (clicks < 0) {
            clicks = 0
        }
        $(this).toggleClass('active-post');
        cards.slice(clicks, cards.length).fadeOut();
        cards.slice(0, 25).fadeIn(););
  });

Upvotes: 0

matthias_h
matthias_h

Reputation: 11416

You can do it like this:

$('.show-15').on('click', function () {
    if (clicks < 0) {
        clicks = 0
    }
    $(".active-post").not(this).removeClass("active-post");
    $(this).toggleClass('active-post');
    cards.slice(clicks, cards.length).fadeOut();
    cards.slice(0, 15).fadeIn();
});

$('.show-25').on('click', function () {
    if (clicks < 0) {
        clicks = 0
    }
    $(".active-post").not(this).removeClass("active-post");
    $(this).toggleClass('active-post');
    cards.slice(clicks, cards.length).fadeOut();
    cards.slice(0, 25).fadeIn();
});

Upvotes: 2

Related Questions