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:

Once the basket area ...

Get jQuery 1.4 Animation Techniques Beginner's Guide now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.