MRMcGovern.com

Every action has an equal and opposite reaction. This statement has been true since the dawn of time, but not since the dawn of the web. Static web pages no longer keep today’s tech-savvy, smart phone addict at bay. People love interactivity, whether it be with other people, computers, or their iPhone. If you have something on your website that is dynamic and exciting, people will keep coming back. People will keep coming back, and they will show other people who will also keep coming back. An exciting and dynamic website will drive more traffic and keep users coming back for more.

So how does one incorporate these interactive pieces into a website?

A great way to add some eye catching effects to your website is by using jQuery’s slide animation. This is a simple jQuery script that will allow you to toggle the visibility of site elements. This ain’t your grandad’s visibility toggle, it actually uses animation to show or hide a chosen element.

Heres How to do it:

Download jQuery and place it on your web site with any other javscript files you might have. Then we’re going to create a javaScript file that will contain all of your jquery scripts to make exciting animations.

First we declare the name of our class

var MYSITE = {};

Then create our constructor function, right now this does nothing, since we have no functions to call when our page loads. The red part is our “list”, which will contain our trigger and target, this will most likely be different for you. The green part is our trigger, or the item we click on to expand or collapse the target. Finally, you guessed it, the blue part is the target. This is the element that we will be able to toggle the visibility of.

$(function() {

jQuery.MYSITE.compactor(’div#page div#content div#body div#post-3.post div.entry‘, ‘p‘, ‘div‘);

}

Finally we create our class

jQuery.MYSITE = {

compactor : function ( list, trigger, target ){

$(list).find(target).css({display :”none”});
$(list).find(target+":first").css({display: "block"});/*This will show the first target when the page loads. This line may be removed if you would like all of the targets hidden at the same time.*/

$(list).find(trigger).addClass(" link").hover( function () {
$(this).addClass(" linkOver");

}, function () {
$(this).removeClass("linkOver");
}).click( function () {
$(list).find(target+":visible").not(this).slideUp("def");
$(list).find(trigger).not(this).removeClass("linkOn"); $(this).addClass(" linkOn").next(target+":hidden").slideDown("def");
return(false);
});

}

}

Last but not least don’t forget to add jQuery and the file you created to your pages. it should look something like this:

<script type="text/javascript" src="jslib/jquery-1.2.6.min.js">
</script>
<script type="text/javascript" src="jslib/scripts.js"></script>