Ashish Patel

jQuery Tutorial Part 1

This article contains visual tutorials intended for web designers and newbies on how to apply Javascript effects with jQuery.

In case you don’t know about jQuery, it is a “write less, do more” Javascript library.

How jQuery works?
First you need to download a copy of jQuery and insert it in your html page (preferably within the tag). Then you need to write functions to tell jQuery what to do. The diagram below explains the detail how jQuery work:

Simple slide panel

Let’s start by doing a simple slide panel. You’ve probably seen a lot of this, where you click on a link and a panel slide up/down. (view demo)

When an elment with is clicked, it will slideToggle (up/down) the element and then toggle a CSS to the element. The active class will toggle the background position of the arrow image (by CSS).


$(document).ready(function(){
$(".btn-slide").click(function(){
$("#panel").slideToggle("slow");
$(this).toggleClass("active");
});
});

Thanks.

Posted in JQueryTagged , 4 Comments

4 responses to “jQuery Tutorial Part 1”

  1. thanks, works beautifully. Now I just have to figure out how to just get the child of the element clicked to toggle (all my elements have the same class and the child elements have the same class, and I don’t want to have to give them all an id and repeat).
    May try index() it worked before. First I have to get the index of the clicked element …

    Reply

  2. I fixed it by finding the index of the clicked element and then using eq(index) on the child.

    Thanks a bunch that worked first time and saved me a lot of effort.

    $(document).ready(function(){

    $(“.className”).click(function(){
    var n = $(“.className”).index(this);
    $(“.className>p.classTwo”).eq(n).slideToggle(“slow”);

    $(this).toggleClass(“active”);

    });

    });

    hope the javascript comes through, thought it might help someone

    Reply

Leave a Reply