jQuery Tip – A Quick look at .click()

Here is a quick jQuery tutorial, or tip, focusing on the .click() event. We will create a simple example that lets the user click on a couple of options to manipulate a box of text below. Because this is just a quick tip on .click() I won't get into the other methods we are invoking on the click event. You can browse around the jQuery documentation to find out more – or better yet sign up for the rss feed here at freeyourdesign and come back for more jQuery tutorials. Anyway we will be changing the content boxes background color and making and slide up and down.

Don't forget to include the jQuery library

You'll need to include the jQuery library in the of your html document in order for this tutorial to work correctly. The easiest way, and some say the best, is to grab the url for the jQuery files hosted by Google. You can use the call below:

A little bit of CSS
Make it look a little less plain.

Build a Box

Next, we will throw together some HTML really quick to manipulate using jQuery. Nothing fancy here – a couple list items, a div and some paragraph content. (I'm using generic id and class names for this example – when coding you should try to use descriptive id and class names)

Finally some jQuery

Start off with a couple of script tags – just like JavaScript. In between the script tags the jQuery code starts with a document ready call.

jQuery Click and Change Background Color
We want the click event to happen on the list items we created – Change Color and Slide. First lets make the background color of the content box change.

We use jQuery to call the .click() event on the list item for Change Color which is <li id="#color"> – let's grab that element by it's ID name and add the .click() method to it:

The function() {} inside the .click() event is going to tell jQuery what we want to do once the ID is clicked. So, let's add some CSS to the ID and give it a background color:

Simple – try it out – click on Change Color and the content box background should change to a greenish color.

jQuery Click Toggle Slide Up and Slide Down
We are going to use the same .click() method on the other list item we created – <li id="slide">.

Now to make it slide up and then slide down using the jQuery slideToggle method on the box.

There you have it – a couple of quick and easy examples of the jQuery .click() method. See how easy jQuery just made it to create a cool little item that slides up to 'disappear' and the slide back down 'into view'.

See the Results
Here is all the code put together:

Popularity: 6% [?]