jQuery Element Visibility Toggle possibilities


Simple toggle() case

function toggleBasic() {

With specific duration

function toggleDuration() {
  $(".target2").toggle("slow"); // A millisecond duration value is also acceptable

...and callback

function toggleCallback() {
  $(".target3").toggle("slow",function(){alert('now do something');});  

...or with easing and callback.

function toggleEasingAndCallback() {
  // You may use jQueryUI as the core only supports linear and swing easings
  $(".target4").toggle("slow","linear",function(){alert('now do something');});  

...or with a variety of options.

function toggleWithOptions() {
    { // See all possible options in: api.jquery.com/toggle/#toggle-options
      duration:1000, // milliseconds
        alert('now do something');

It's also possible to use a slide as animation with slideToggle()

function toggleSlide() {
  $(".target6").slideToggle(); // Animates from top to bottom, instead of top corner

...or fade in/out by changing opacity with fadeToggle()

function toggleFading() {
  $( ".target7" ).fadeToggle("slow")

...or toggle a class with toggleClass()

function toggleClass() {

A common case is to use toggle() in order to show one element while hiding the other (same class)

function toggleX() {

All the above examples can be found here