First you need to grab a copy of jQuery Grab the latest released mini(compressed) version.
How to get the elements you need.
Creating jQuery Functions is relatively easy thank to the great documentation. The main thing you have to know is how to get the exact element that you want to apply the effects to.
Example :
* $(”#header”) = get the element with id=”header”
* $(”h3″) = get all <h3> element
* $(”div#content .photo”) = get all element with class=”photo” nested in the <div id=”content”>
* $(”ul li”) = get all <li> element nested in all <ul>
* $(”ul li:first”) = get only the first <li> element of the <ul>
So with that in mind we are going to create our first jQuery effect. The commonly seen sliding panel, where you click a button and a panel slides up or down. Create a html document and call in the JavaScript file between the <head> tags along with you css file for styling. Then create two divs, one big one called <div id=”panel”></div> for the pannel and <div class=”btn-slide”></div> for the button. Style as you wish.
Then call is javascript into your page either inline, or by an external .js file.
When any element with in your html file is clicked, it will toggle the slide up and down of the <div id=”panel”> element and then toggle a CSS class=”active” to the <a class=”btn-slide”> element. The .active class will toggle the background position of the arrow image (by CSS).
