CODEWITHSUNDEEP
javascriptjqueryaddclassremoveclass
Huma Ali
Huma Ali

Reputation: 1809

Adding and removing class in jquery

I'm trying to show/hide my div elements using slidetoggle and slideDown. Its working perfectly fine. Now what I'm trying to do is, I want to addClass 'visible-divs' to the visible divs only and removeClasswhen they get hidden.

Problem is, the class is added succesfully but it doesn't remove the class when it slides up to hide them. What am I doing wrong?

$(".OffersContainer > div:gt(0)").hide();
    
$(".OffersContainer > span").click(function() {
    this.clickCount = (this.clickCount || 0) + 1
    var command = this.clickCount % 3 === 0 ? 'slideToggle' : 'slideDown';
    $(this).siblings(this.clickCount % 3 === 1 ? "div:lt(3)" : "div:gt(0)")[command]();
    $('.pan-box').filter(':visible').addClass("visible-divs");
    $('.pan-box').filter(':hidden').removeClass("visible-divs");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="OffersContainer">
    <div class='pan-box'>A</div>
    <div class='pan-box'>B</div>
    <div class='pan-box'>C</div>
    <div class='pan-box'>D</div>
    <div class='pan-box'>E</div>
    <span>Show more</span>
</div>

Upvotes: 3

Views: 132

Answers (2)

skobaljic
skobaljic

Reputation: 9614

If you do not want to wait for animation to finish, since you already know which options to hide or show, than you can use this code:

$(".OffersContainer > div:gt(0)").hide();
$(".OffersContainer > span").click(function() {
    this.clickCount = (this.clickCount || 0) + 1
    var command = this.clickCount % 3 === 0 ? 'slideToggle' : 'slideDown';
    $(this).siblings(this.clickCount % 3 === 1 ? "div:lt(3)" : "div:gt(0)")[command]();
    console.log(this.clickCount % 3 * 3 - 1);
    $('.pan-box:lt(' + (this.clickCount % 3 * 3) + ')').addClass("visible-divs");
    $('.pan-box:gt(' + (this.clickCount % 3 * 3) + ')').removeClass("visible-divs");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="OffersContainer">
    <div class='pan-box'>A</div>
    <div class='pan-box'>B</div>
    <div class='pan-box'>C</div>
    <div class='pan-box'>D</div>
    <div class='pan-box'>E</div>
    <span>Show more</span>
</div>

Also on JSFiddle playground.

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337560

For this to work you need to select the :visible/:hidden elements after the animation completes. To do this, use the callback function parameter:

$(".OffersContainer > span").click(function() {
    this.clickCount = (this.clickCount || 0) + 1
    var command = this.clickCount % 3 === 0 ? 'slideToggle' : 'slideDown';
    $(this).siblings(this.clickCount % 3 === 1 ? "div:lt(3)" : "div:gt(0)")[command](function() {
        $('.pan-box').filter(':visible').addClass("visible-divs");
        $('.pan-box').filter(':hidden').removeClass("visible-divs");
    });
});

Updated fiddle

As an aside, what's the point of changing a class on a hidden element? By definition the effect won't be seen. You can just use the :hidden selector alone if you want to know which elements are hidden

Upvotes: 4

Related Questions