Question

Can anyone tell me what I’m doing wrong in this jquery script?

$(document).ready(function() { 
    $("a.book").click(function() {
        $(this).parent().next('div').slideToggle('slow', function(){
            $(this).toggleClass('bookopen');
        });
    });
});

I want the div to toggle, and then afterwards I want the element $a.book to change to $a.bookopen. But when I write the code above the toggle doesn’t work. If I remove the callback function toggleClass the the slideToggle works just fine.

Any ideas? I appreciate your help.

Answer 1

Your this reference in the inner callback is to the div that’s being toggled, not the a that triggered it. You could close over a reference to it,

$(document).ready(function() { 
    $("a.book").click(function() {
        var $a = $(this);
        $(this).parent().next('div').slideToggle('slow', function(){
            $a.toggleClass.('bookopen');
        });
    });
});

or you could navigate back to it from jQuery methods from the div:

$(document).ready(function() { 
    $("a.book").click(function() {
        $a.parent().next('div').slideToggle('slow', function(){
            $(this).prev('whatever').find('a.book').toggleClass('bookopen');
        });
    });
});

Note that this depends on the element structure.