How to make this toggle effect possible?

Question

default condition

After clicking on Sitemap link

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

Answer 1

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);

Answer 2

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

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