jquery - how to add/remove class on slideToggle?

Question

I would like to each time the div expands, to add the class 'selecionado' once the expansion is finished. When the contraction is done (the slideUp part) I would like to remove this class.

Can I have a help here please?

$('#btCategoriaA').click(function()
{
  $('#listaCategoriaA').slideToggle('slow', function() {
   $('#btCategoriaA').addClass('selecionado');
  });
});

Thanks in advance, MEM

Shame

Answer 1

You can toggle the class using .toggleClass() based on if the element .is() :visible after the animation, like this:

$('#btCategoriaA').click(function() {
  $('#listaCategoriaA').slideToggle('slow', function() {
    $('#btCategoriaA').toggleClass('selecionado', $(this).is(':visible'));
  });
});

Dulles

You really rock on js don't you? :P Thanks a lot. :D – Shame

One more thing please, I'm doing this using using css states like a:hover. The thing is, I need to disable the hover, once the user clicks, otherwise, the effect will be quite weird, because once it clicks the state should change, but since it's hovered, it doesn't. :s Is there a way to disable the a:hover applied once the user clicks or something? – Shame

@Shame - You can have the :hover as a.Off:hover and remove that Off class when adding the selecionado one. – Dulles

#4066286 – Shame

@Nick Craver: So, the a.Off:hover will NOT apply the hover effect. Once we remove the Off part, the hover will be applied, is that the trick? – Shame

@Shame - it should start off with the Off class, then when it's removed it'll no longer be a.Off, so the :hover on that class won't work, make sense? – Dulles

@Nick Craver: I'm to tired or I'm to dummy do get it. :( Care to update your js answer with the css part so that I can study it and understand what you mean? – Shame

@Nick Craver: No I haven't! OMG. :( – Shame