Hello everyone, welcome to my series tutorials on jQuery. Now-a-days, Jquery is one of the most popular javascript framework. We can easily manipulate our client side scripting by using jquery. As a first day task, I'm going to show you "how to make slide down of a div", "slide up a div" and "toogle effect of a box div" using jquery.

Before starting tutorials i would like to say, jQuery uses CSS selector property behavior and they are quite similar. So, if you are good enough in CSS then I think you can learn jQuery just in a few weeks. Or If you've not much more idea about CSS scripting or commands then you can review the css first then start jquery. As a result, jQuery seems very easier to you. 

First we have download jQuery core file.

>> Download jquery files http://www.coolajax.net/js/jquery.min.js

Step 1: Define a css script.

Have a look at the CSS code. Here we've defined a div called "box" and set witdh, height, display and background properties of this div.  You can change or add all the properties parameters.

Then we define a paragraph "p" tag. It's very much interesting to notice that, we write down an "a" beside the paragraph tag. This "a" means an anchor tag and it works between all the paragraph tags.

If we define simply  "a"  without  "p"  tag than it works all the pages in a website. But with "p a" syntex we define this "anchor" tag only work inside the "paragraph" tag. This is called chaining. I think for the first time it seems little bit confusing to you. After few days we will get familler with this type of syntex. So, don't be panic :)

Step:2 Define Javascripts

Ok, Now it's time to explain javascript. Great, By using jQuery convention we start our javascripts code with -

"$(function () { // here we write our code functionality} );"

This code means our javascripts ready to execute, when the body section load for the first time.In Next segements,

"$('a').click(function() {// here we write our code functionality })"

means that, when we click an "anchor(a)" tag then this code will execute. Here we use   "blur","focus","mouseover","mouseout" functionlaity as like javascripts. Then we define,

"$('#box').slidedwon(4000)"

It means, when we click on the anchor then this "div" will called and show an animation. We can use "slideup","fadein","fadeout" functions as well."4000" defines the time limit of sliding execution. 4000 means 4 seconds. Next

"$('#dummy').tooggle"

its a very interesting and use full funcitonality of jquery. Because sometimes we need to show a div and similarly want to hide. If we use toogle functions then, it show a hidden div and hide a visible div as per your requirements. Just you have define the div name to use toggle functions.Finally,

"$('p a').css('color','green')"

I love this property very much. because i can directly use css in jquery code.when we click on anchor link then it makes all the link color green that we declare in to paragraph tags. That's all for javascripts. Now have a look on html part.

Step 3: Define a HTML

Here is the HTML file. In this file we define anchor tags, paragraph tags. We also define some anchor tags inside the parargph. When you click on the "click me "link then "box" div animate and anchor tags inside the paragraph tag trun in to green color.

Demo Available:

http://www.coolajax.net/jquerydemo/tutorial_1/

Download Codes:

http://www.coolajax.net/jquerydemo/tutorial_1/tutorial_1.zip

Was this information useful? What other tips would you like to read about in the future?  Share your comments, feedback and experiences with us by commenting below!

Like our site? Be a member of Coolajax fan page to get daily posts updates!