Sexy html! Thank you JQuery! Gray hairs be gone!

Anyone who has worked with JQuery cannot deny the absolute simplicity it brings to the table in terms of animation. (This is definitely not the only thing JQuery is great at but what I am focusing on today)








Before I knew of JQuery I always used to think to myself, "Gee I wonder how much effort it would take to make this <div> tag I have here and make it pop out when I click this tag right over here using some JavaScript?".

As the questions began to roll in, I became thankful that Mathematics and Physics was one of my stronger subjects!

"How far out must it slide out, oh gee wait! What will it take to make this div tag slide?"  Then the physics I took in school emerged and had a chance at some roll play: "Distance over time", how many pixels per milli second must it slide to cover the distance in a certain time. BLAH BLAH. WHAT A MISSION. Enough of that already!

I hear this often, don't invent the wheel twice! Hmmm, Hello JQuery :) Bye bye JavaScript (sort of).
Just quickly before you ask:

What is JQuery?
A JavaScript library.

How do I use it?
Download it here:
http://jquery.com/download/ (this is the core library)

Since we will be creating visual effects we will also need to include the UI library of JQuery.
Download it here:
http://jqueryui.com/download/

How do use it?
Add the JQuery core file and then the UI library file to your web page like you would a JavaScript file in the head tag.
Create another JavaScript file and add it to your web page after your two JQuery libraries.

Bob is your uncle. You now have the functionality JQuery has to offer. Easy hey? Indeed.

So lets get straight to it shall we.

id="toppart"

id="slider"

To get the blue div above to slide up and down when you click the red div the following code is all you need:

$(document).ready( function(){
      $('#toppart').click(function(){
             $('#slider').slideToggle();
      });
});
And thats that. Seriously. Not joking.

In English:
$=Selector

So this is what the above code equates to:
$(document).ready( function() {
When the DOM has been loaded, do the function in the brackets.

$('#toppart').click(function(){
When the tag with an id of "toppart" is clicked do the function in the brackets.

$('#slider').slideToggle();
Complete the JQuery slideToggle() function on the tag that has an id of "slider".

This Nifty little functin toggles the 'display' css attribute.

Not only is this extremely easy to accomplish its also extrememely satisfying seeing all sorts of crazy animations occour at your command!

This really is just the tip of the tip of the iceburg.