Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jquery - how to add/remove class on slideToggle?

Tags:

jquery

slide

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

like image 686
MEM Avatar asked Oct 31 '10 23:10

MEM


People also ask

How do you add and remove a class on toggle?

jQuery toggleClass() Method The toggleClass() method toggles between adding and removing one or more class names from the selected elements. This method checks each element for the specified class names. The class names are added if missing, and removed if already set - This creates a toggle effect.

What does slideToggle do in jQuery?

jQuery slideToggle() Method The slideToggle() method toggles between slideUp() and slideDown() for the selected elements. This method checks the selected elements for visibility. slideDown() is run if an element is hidden. slideUp() is run if an element is visible - This creates a toggle effect.

What is the difference between toggle and toggleClass in jQuery?

The toggle method makes an element visible or hidden, whichever is the opposite of what it is already. It's like using hide or show but you don't need to know which one to pick, it performs like the one that will make a difference. The toggleClass method does something similar to an element's class.


1 Answers

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'));
  });
});
like image 184
Nick Craver Avatar answered Sep 17 '22 18:09

Nick Craver