Collapsing and expanding footer using JQuery

Footer concept changing day by day. Web2 footer is big and lot of links and information carrying on that. Here you can see different types of footers.

Today I am going to discuss about collapsing and expanding footers. Most of the site doesn’t have collapsing and expanding footer. But It would be nice if you have one like that. Because it is easy for the user. If he wants to see that he can otherwise not. It avoids the unnecessary scroll.

Demo

Source

Here is some code snippet that you can try for your site. It uses Jquery as javascript framework. Download jquery from here. It is very easy to integrate.

First I am creating one HTML file. I showed here between to tag only.

In the main footer div I added a link named toggle button. This is our action link.

Now we need to include jquery in the header.

You can simply include like this inside the of your html

If you have doubt please check different ways to include Jquery?

Now our simple javascript to do the functionality. Just paste this after the inclusion of jquery

Tags: , , , ,

2 Responses to “Collapsing and expanding footer using JQuery”

  1. Jaison Says:
    September 24th, 2009 at 12:15 pm

    Cooool

  2. Hark Says:
    January 10th, 2010 at 10:19 pm

    Is it possible to use this for wordpress? I would like to be able to collaps my footer.