Doubt with Jquery .toggle

Doubt with Jquery .toggle
0.0 0

#1

I’m using .toggle to toggle between hide and show. But I want when I click to go back hide, I want a new class to be added to the element. Please, how do I do this?

Here is the jQuery code:

$(document).ready(function(){ /*Função para executar o código somente quando o 
* DOM do site estiver Carregado*/
    $("#icon-menu").click(function(){ /*Função para clicar no icone do menu e 
* aparecer uma lista*/
       $("#row-menu-xs").toggle(500); /*Comando para alternar entre display none
*e block do menu quando a tela for menor*/
    });
//função resposável por quando clicar no icone do menu xs ele se anime de alguma forma
    $("#icon-menu-xs").click(function(){
        $("#icon-menu-xs").toggleClass("swing");
    });
});

#2

Ok so crash course time with CSS transitions, classes, and jQuery toggle. (BTW I use this all the time)

  1. You have your element:
    < element > Hello World < /element >
  2. You have some css class to hide the element
    .hide {
    display: none;
    }
  3. Next lets get some jQuery code
    $(“element”).toggleClass(“hide”);
  4. Now lets say we have a button, that when clicked execute the above jQuery code

Result:
The element we defined will get the class .hide added to it and any properties defined in the hide class will affect the element. If you go ahead and click the button again it will remove the hide class and return the element to it’s initial state.

If you’re still confused I recommend these resources:

http://api.jquery.com/toggleclass/

Happy Coding!


#3

http://www.w3schools.com/jquery/jquery_hide_show.asp

http://www.w3schools.com/jquery/eff_toggle.asp