Improving the home page with JQuery effects

I have been using very simple home page for myself for quite some time. It did not have any flashy stuffs, just plain HTML. So, wanted to improve it and used JQuery for the same. JQuery is a JavaScript library that helps the developers to easily traverse DOM elements. JQuery also comes with some pre-built, cool animation functions. Thse functions can be used to animate (like Sliding, moving, fading) HTML elements very easily with less code. In fact I just took 2 hours to incorporate JQuery into my home page veerasundar.com. Below is a small text on what I did and how I did.

Collapsable Panel:
Previously I was having a seperate page to show my experience information. After using JQuery, now I have this information in my front page itself with hidden status and a link to show it. So, when the user clicks on the link “Show” more, the information panel will actually slide down. Below is the code snippet for this:

information panel with DIV element and Open Link:

….Other contents here..
<a class=“showMoreAboutMe” href=“#”>Show more information.</a>&nbsp;&nbsp;

<a class=“hideMoreAboutMe” href=“#” style=“display:none;”>Show less information.</a>

<div id=“MoreAboutMe” style=“display:none;”>
….contents…
</div>
….Other contents here..

The JQuery code to activate the animation:

$(document).ready(function(){

	$(".showMoreAboutMe").click(function(){
 $("#MoreAboutMe").slideToggle("slow");
 $(".showMoreAboutMe").animate({opacity: "hide"}, "slow");
 $(".hideMoreAboutMe").animate({opacity: "show"}, "slow");
	});
$(".hideMoreAboutMe").click(function(){
$("#MoreAboutMe").slideToggle("slow");
$(".showMoreAboutMe").animate({opacity: "show"}, "slow");
$(".hideMoreAboutMe").animate({opacity: "hide"}, "slow");

	});});

Thats it for the collapsable panel. To see it in action click the link ‘Show more information’ in my home page http://veerasundar.com.

Accordion Effect:
Previously I have having seperate sections to display the RSS feeds from my blogs. Now I have a single display panel for all my blogs. This comes possible by using Accordion style panel. Thanks to Web designer wall for the code sample for this.

That’s it for now. I am still exploring more on JQuery. Will blog it here as I find something useful.

Tagged as: javascript, jquery