Adding and removing class in jquery

Question

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>

please add relevant code to OP

guradio
– guradio

2016-07-13 08:16:00 +00:00
Commented Jul 13, 2016 at 8:16 — guradio
– guradio, Commented Jul 13, 2016 at 8:16

Rory McCrossan · Accepted Answer · 2016-07-13 08:18:02Z

4

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

answered Jul 13, 2016 at 8:18

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Huma Ali Over a year ago

Later in my code I have applied some logic on those divs which have class visible-divs . Therefore I need to get rid of this class once the divs get hidden.

Rory McCrossan Over a year ago

Exactly - my point is you could just use :visible instead of having to maintain the state of a class attribute

skobaljic Over a year ago

He can also add/remove the class before the animation, think that's what he wants. Otherwise, he would need to place all incoming code inside the callback function.

Rory McCrossan Over a year ago

@skobaljic he was originally doing that, which is why the :hidden elements never had their classes removed.

Rory McCrossan Over a year ago

How? The element will be visible until the animation finishes, hence why you have to use the callback

|

skobaljic · Accepted Answer · 2016-07-13 08:55:08Z

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.

Collectives™ on Stack Overflow

Adding and removing class in jquery

2 Answers 2

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related