jQuery 1.4 Animation Techniques - Index of

Toggling the slide
[ 83 ]
Chapter 4
The final slide method is slideToggle(), which provides rudimentary state-checking in
order to determine whether the element should be hidden with slideUp() or shown with
slideDown(), and then applies the relevant effect. Like the toggle() method that we
looked at earlier, the built-in state checking mechanism is provided as a simple convenience,
but there may be situations where we need to provide our own logic.
The slideToggle() method may accept the same arguments as the other slide methods,
or an object that makes use of easing. For reference, the usage pattern is as follows:
jQuery(elements).slideToggle([duration], [easing], [callback]);
Time for action – using slideToggle
On the checkout pages of e-commerce sites, it's customary to show the products that are
in the visitor's basket so that they know exactly what they're buying. Typically the checkout
page (or pages) will be quite long due to the amount of information the visitor will need to
enter, especially if it is their first visit to the site.
The page can often end up requesting names, e-mail addresses, and other contact
information, payment methods, and more. Hence, it can be useful to hide the contents
of the basket and just show a summary, but to allow the basket to be expanded to show
the full details of their purchase.
The following screenshot shows how the basket will appear once it has been opened: