jQuery 1.4 Animation Techniques - Index of

Sliding Animations
4. Save this in the css folder as slideToggle.css and link to the file from the
of the page we just created.
5. For the final part of the example we can add the script that will toggle the visibility
of the contents table. Add the following code to the bottom of the HTML page:
var toggler = $("#basketToggle"),
basketArea = $("#contents"),
newText = ["", "basket", "contents"];
toggler.click(function(e) {
}
});
e.preventDefault();
if (!basketArea.is(":animated")) {
basketArea.slideToggle("slow", function(){
toggler.text(function(i, text) {
if (basketArea.is(":visible")) {
newText[0] = "Hide";
} else {
newText[0] = "Show";
}
toggler.text(newText.join(" "));
});
});
6. Run the page in your browser now. You should find that you can open or close
the contents section of the basket area by clicking the link in the top-right of the
container. The basket area should expand like this:
[ 86 ]