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.

Toggle footer


links are going here

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