How to Create A Sliding Panel with Jquery

Posted on October 29, 2008 - by admin

How to Create A Sliding Panel with Jquery

We are going to show you a series of how to articles to create some jQuery effects with JavaScript in your web designs. In case you don’t know what jQeury is, it’s a JavaScript Library. It has heaps of Ajax and JavaScript components that will let you enhance your web design and the users experience on your site.

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.

<script type=”text/javascript”>
$(document).ready(function(){

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

});
</script>

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).

Try it out !

This entry was posted on Wednesday, October 29th, 2008 at 2:20 am and is filed under Jquery. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

1 Comment

We'd love to hear yours!

Visit My Website

November 12, 2008

Permalink

pappu said:

thanks dude…

Posted on October 29, 2008 - by admin