Question

i’m pretty sure that this question has allready been asked (but i didn’t find the solution).

Well my problem is, that the callback repeats it’s job for every element of a class. example:

$('a').click(function() {
    var id = $(this).attr('rel');
    $('.jsForm').not('#'+id).slideUp('slow', function() {
        $('#'+id).slideToggle('slow');
    });
});

the class jsForm is applied to 3 different div elements which all have a unique id. The id comes from a-tag in the rel attribute.

the aim of this code is that all the div elements apart from the one with the clicked id are sliding up. After the other divs slided up, the main div should toggle.

But if I have 3 divs, the callback functions is called 2 times and it toggles twice.

is there a possibility to avoid that every element of a class gets a own callback function? One callback functions for the whole class would be fine for me.

i hope you can understand my question. thank you.

Answer 1

You could use a counter to execute only after the last slide:

$('a').click(function() {
    var id = $(this).attr('rel');
    var size = $('.jsForm').length - 1;
    var count = 0;
    $('.jsForm').not('#'+id).slideUp('slow', function() {
        if (++count == size) {
          $('#'+id).slideToggle('slow');
        }
    });
});