Below is a list of jQuery demos using the Accordion jQuery Plug-in to make the different sections collapsible.

jQuery Plug-in: Accordion

This plug in is a great way to save some space on your page.  You can use it for Q&A sections or anyplace where you can sectionalize your content.  You can place images and text in the hidden section.  The files for this can be found at: jqueryui.com/accordion. Of course you can style it however you wish and vary the functionality.

screenshot-accordion

See the Demo

Jump to the article ...

jQuery Plug-In: Cycle

The Cycle plug-in allows for different settings for the transition like shuffle, curtain, zoom, etc., it also allows autoplay to be turned on or off. You can get the source files from jquery.malsup.com

screenshot-cycle

See the Demo

Jump to the article..

jQuery Plug-in: Popeye

The Popeye plug-in is sort of like a lightbox with a twist. It allows your image to enlarge to the left or right, allows it to have navigation buttons all the time, or only on hover, and allows you to scroll through a list of images while the image is in the enlarged state.

popeye-screenshot

See the Demo

Jump to the article...

jQuery: Dropdown Menu

This isn't a plug-in, but something I came up with on my own using jQuery. It has very simple functionality, but could be styled however one wishes.

screenshot-dropdown

See the Demo Download the example

Jump to the article...

jQuery: QuickFlip

QuickFlip is a great flashcard application. It can do lots of other things - see their website at http://dev.jonraasch.com/quickflip. My demo show a couple diiferent method for applying the QuickFlip parameters. You can flip the cards horizontally or vertically.

screenshot-quickflip

See the demo

Jump to the article...

jQuery: Multiple Choice Quiz

This is multiple choice quiz format that I developed using jQuery functions.

Upon selecting an answer for each image, the script brings up a response box to let the user know if the answer was correct. The script also keeps track of the number of images shown and the number of correct responses.

screenshot-quickflip

See the demo

jQuery: Slides

Slides is a simple little slide show plug-in, not a lot of fancy stuff, but it gets the job done.

It allows for autoplay and navigation through the slides. You can get the plug-in from slidesjs.com

screenshot-slides

See the demo

Jump to the article...

jQuery UI: .slider()

Sliders are the a jQuery UI functionality that allows you to have little sliders to set certain values incrementally.

This Color Picker with Opacity demo is a modification of the demo provided on the jqueryui.com/slider web page. It allows you to use sliders to change the swatch color. The demo also provides the hex code and the rgb value if you want to copy it for use in your CSS or such. It has the added feature of opacity modification.

screenshot-slides

See the demo

Jump to the article...

jQuery: Adding Machine Demo

A nice little adding machine with a functioning paper tape to keep track of your numbers. This demo uses some fun CSS3 to create almost all the graphics, save the plastic serrated cutter and the rough edge on the paper and a couple other small graphic touches. Go ahead, try it.

addingmachine

See the Demo