.toggle()S2C Home « Effects « .toggle()

• <<    .show()
• .animate()     >>

Toggling elements.

Description

The .toggle() method is used to show or hide the matched set.

• When hiding elements the display property of the elements to be hidden is stored in the jQuery cache, so if the element is later made visible, the display property is restored to its initial value.
• When showing elements the display property of the element to be shown is restored to its initial value. If using !important in your styles, it is necessary to override the style using .css('display', 'block !important') for the .show() method to function correctly
• When the duration, easing or callback parameters are used, the .toggle() method becomes an animation method.
• There is also a mouse event named .toggle() which was deprecated in jQuery 1.8 and removed in jQuery 3.5.

This method was deprecated in jQuery 1.8 and removed in 1.9.

Syntax

Parameters

Return

A jQuery object.

.toggle() ExampleTop

Show or hide the matched set.

• When used in its basic form with no parameters the .toggle() method shows or hides the elements immediately with no animation.

In the example below when the button is pressed we show the image below of thai green curry.

$(function(){
  $('#btn13').on('click', function() {
    $('#curry7').toggle();
  });
});

.show( showOrHide ) ExamplesTop

Show or hide the the matched set depending upon the boolean value of the parameter.

• When used in this form the .toggle( showOrHide ) signature shows or hides the elements immediately with no animation.

In the example below when the left button is pressed if the image is shown it will be hidden.

When the right button is pressed when the image is hidden it will be shown.

$(function(){
  $('#btn14').on('click', function() {
    $('#curry8').toggle(false);
  });
  $('#btn15').on('click', function() {
    $('#curry8').toggle(true);
  });
});

.toggle( duration [, callback] ) ExamplesTop

Show or hide the matched set providing a duration and optionally a callback function.

When we press the left button below is pressed we show or hide the image below on the left of chicken masala using a slow 'duration'.

When the right button is pressed we first select all the images of chicken korma (class of 'curry10'). After this we use the .first() method to extract the first image in the set and pass this through the callback function. Within the function we use the .next() method to cycle through the images, showing or hiding each in turn with a animation speed of 400 milliseconds.

$(function(){
  $('#btn16').on('click', function() {
    $('#curry9').toggle('slow');
  });
  $('#btn17').on('click', function() {
    $('#div3 .curry10').first().toggle(400, function() {
      // using 'callee' so we don't have to name the function
      $(this).next().toggle(400, arguments.callee);
    });
  });
});

.toggle( [duration] [, easing] [, callback] ) ExamplesTop

Show or hide the the matched set optionally providing a duration, and/or an easing and/or a callback function.

In the example below when the left button is pressed we use 'swing' easing to animate the picture as we show or hide it.

When the centre button is pressed we use a callback to alert when the image is shown or hidden.

When the right button is pressed we use a duration, easing and a callback to alert when the image is shown or hidden.

$(function(){
  $('#btn18').on('click', function() {
    $('#pie7').toggle('swing');
  });
  $('#btn19').on('click', function() {
    $('#pie8').toggle(function() {
      alert('Animation finished.');
    });
  });
  $('#btn20').on('click', function() {
    $('#pie9').toggle('slow', 'swing', function() {
      alert('Animation complete.');
    });
  });
});

• <<    .show()
• .animate()     >>