The jQuery API method of .toggle() will toggle between the methods of .hide() and .show() for the selected elements. It will check the selected elements for their visibility and if it is visible, will apply .hide() and if it is not visible will apply .show(). It is a tricky method, as you do not want the element in the selector in which you are clicking to be the element that is hiding, or you can't click on it to make it show again.

The name of the .toggle() methods makes it seem like you would use it to switch from one state to another for things other than visible and not-visible - but it doesn't really apply to those situations and it is better to use other methods.

Because .toggle() uses the .hide() method the styling of display: none is applied to the element in question. This means that the space that it takes up is gone from the DOM. This can change your layout. 

 

Parameters for the .toggle() method

Within the parentheses for .toggle() you may use the following parameters:

speed: you can uses "slow", "fast" or use milliseconds

easing: you can use the jQuery easing effects. You must have the easing .js file loaded for this to work for anything but the core effects of "linear" amd "swing". The default value is "swing"

 

Here is a very simple example of using .toggle()

$("button").click(function(){
    $("#redballoon").toggle(4000, "easeInOutBounce");
});

The HTML:

<img id="redballoon" src="/images/balloonred.png" alt="Red balloon" />
<button>HIDE OR SHOW THE BALLOON</button>

The result: