Example of toggle method in jquery

(1) toggle

The switchover effect of hidden display should be quite common. There are multiple implementation methods for this effect:

The code is as follows:	Copy code
Var phpersnote = document. getElementById ('phpernote '); If (phpersnote. style. display = 'block '){ Phpersnote. style. display = 'none '; } Else { Phpersnote. style. display = 'block '; } Var phpersnote = $ ('# phpernote '); If (phpersnote. is (': Den ')){ Phpersnote. show (); } Else { Phpersnote. hide (); } $ ('# Phpernote'). toggle ();

The above show hide toggle method has some parameters that can be called to achieve some animation effects, which is not described here.

(2) slideToggle

This is the pull-down or up effect, implementation method:

The code is as follows:	Copy code
Var phpersnote = $ ('# phpernote '); If (phpersnote. is (': Den ')){ Phpersnote. slideDown (); } Else { Phpersnote. slideUp (); } $ ('# Phpernote'). slideToggle (); SlideDown slideUp slideToggle has corresponding parameters to achieve better animation effects for users.

(3) fadeToggle

Fade in the div and fade out the hidden effect:

The code is as follows:	Copy code
Var phpersnote = $ ('# phpernote '); If (phpersnote. is (': Den ')){ Phpersnote. fadeIn (); } Else { Phpersnote. fadeOut (); } $ ('# Phpernote'). fadeToggle ();

FadeIn fadeOut fadeToggle has corresponding parameters to achieve better animation effects for users.

(4) toggleClass

To add or remove a class to or from an object:

The code is as follows:	Copy code
Var phpersnote = $ ('# phpernote '); If (phpersnote. hasClass ('com ')){ Phpersnote. removeClass ('com '); } Else { Phpersnote. addClass ('com '); } $ ('# Phpernote'). toggleClass ('com ');