jQuery demo -- code up a sliding panels page:

Please note: This demo is meant to be done AFTER having gone through the second jQuery lecture "jQuery Part 2".

First off, load up the start file jq_classes_1a.html.

1. Hide the #previw object
2. Hide all .info objects
3. When the #bounce object is clicked slideDown ALL .info objects and then slideUp all info objects (chain them).
4. When the #collapse object is clicked hide all .info objects
.
5. When the #expand objects is clicked show all .info objects
6. When someone does a mouseover on an .item object:
1. Set the css background-color of THAT object to yellow
2. Target the NEXT object on the page and perform a slideDown
7. When someone does a mouseout on an .item object:
1. Set the css background-color of THAT object to #eee
2. Target the NEXT object on the page and perform a slideUp

Wnen you are done your page should be performing like jq_classes_1b.html

Then for a bit more advanced functionality, which will require a tiny bit of manual javascript. Take a look at the item objects (the divs we use as triggers). NOtice that they have href attributes... even through they are not "links". I have saved URL info as "href" attributes of the divs. Now we will add to the jQuery bind block such that we copy that href value to a variable, and then use that to set the src of hidden iframes to that web site to give a "preview" of the site:

	 $(".item").bind("mouseover", function() {
			$(this).css("background-color","yellow") ;
		 	$(this).next(".info").slideDown(2000);

			// more advanced functionality -- expands the iframe at the bottom and sets the src 
            // (web page) of the iframe to an href that was stored in a div... 
			$("#ifra").attr("height","600");
			$("#ifra").attr("src",   $(this).attr("href")   );
	 });

You can see that final step in action at jq_classes_2b.html.