The slideToggle method
The slideToggle method smoothly shows hidden elements and hides shown ones.
Syntax
Show/hide for a given time, 400ms by default:
.slideToggle(duration);
Time can be specified not only in milliseconds, but also using the keywords slow (600ms) and fast (200ms), the higher the value, the slower the animation:
.slideToggle('slow' or either 'fast');
If you do not specify parameters, there will be no animation, the elements will be shown/hide instantly:
.slideToggle();
You can also pass the smoothing function as the second parameter, and the callback function as the third parameter - it will be triggered after the animation is completed. Both parameters are optional:
.slideToggle(duration, [smoothing function], [callback-function office]);
You can pass various options to the method, in the form of a JavaScript object containing key:value pairs:
.slideToggle(options);
Such an object can pass the following parameters and functions - duration, easing, queue, specialEasing, step, progress, complete, start, done, fail, always. You can see the description of these parameters for the method animate. For example, let's set the duration and the smoothing function:
.slideToggle( {duration: 600, easing: easeInSine} );
Example
Let's after pressing the button, smoothly hide the parent div, which contains the paragraphs, using the slideToggle method (we will find this div using the parent method), after pressing the button again, div will be smoothly shown again and so on. By passing the slow keyword, we set the speed to 600ms:
<button>toggle text</button>
<div>
<p id='test'>text text text text text text text</p>
<p>text text text text text text text</p>
<p>text text text text text text text</p>
</div>
$('button').click(function() {
$('#test').parent().slideToggle('slow');
});
