How to make this toggle effect possible?

default condition

alt text http://shup.com/Sh开发者_如何学Goup/330969/1104593215-My-Desktop.png

After clicking on Sitemap link

How to write HTML to get footer links after the sitemap tree upon clicking on Sitemap link?

alt text http://shup.com/Shup/330973/110459357-My-Desktop.png

Jquery show and hide are your friends. Or, an even easier solution is to use toggle!

$('#show_hide').click(function(){
  $("#links").toggle();
  return false;
});

Style the links and the sitemap in a layout that you desire, then add the following JavaScript (tag the sitemap with id #sitemap and the link with id #smLink):

function toggleSitemap() {
  var sitemap = document.getElementById('sitemap'),
      smLink  = document.getElementById('smLink');
  smLink.innerHTML = (smLink.innerHTML == 'Sitemap -') ? 'Sitemap +' : 'Sitemap -';
  sitemap.style.display = (smLink.innerHTML == 'Sitemap -') ? 'block' : 'none';
}
document.getElementById('smLink').addEventListener('click', toggleSitemap, false);