CODEWITHSUNDEEP
javascriptjquery
olo
olo

Reputation: 5271

jQuery slideToggle callback function and toggleclass

HTML

<div class="a">
    <div class="b">CLICK</div>
    <div class="c"></div>
</div>
<div class="a">
    <div class="b">CLICK</div>
    <div class="c"></div>
</div>
<div class="a">
    <div class="b">CLICK</div>
    <div class="c"></div>
</div>

jQuery

$('.c').hide();
$('.b').click(function(){
    $(this).next('.c').fadeToggle();

    if($('.b').eq(0).is(this)){
    $(this).toggleClass('yellow');
}
});

ONLINE SAMPLE

How do I make once slideToggle finishes then start toggleclass, like the 1st box, I'd like it to change to yellow color once the fadeToggle finishes

Upvotes: 1

Views: 470

Answers (2)

Ram
Ram

Reputation: 144689

You can use fadeToggle's callback function:

Working demo: http://jsfiddle.net/Kqc2B/

$('.b').click(function () {
    var that = this;
    $(this).next('.c').fadeToggle(function() {
        if ( $('.b').eq(0).is(that) ) {
            $(that).toggleClass('yellow');
        }
    });
});

Upvotes: 3

Arun P Johny
Arun P Johny

Reputation: 388316

You can use the complete callback option provided by fadeToggle, it will get called once the animation is completed

$('.c').hide();
$('.b').click(function(){
    var $this = $(this);
    $this.next('.c').fadeToggle(function(){
        if($('.b').eq(0).is($this)){
            $this.toggleClass('yellow');
        }
    });
});

Demo: Fiddle

Upvotes: 1

Related Questions